fix: project details table refresh

src/components/wrappers/common/button/button-with-confirm.tsx

@@ -1,15 +1,15 @@
 "use client"
 import {Button, ButtonVariantsProps} from "@/components/ui/button";
-import {useState} from "react";
+import {ReactNode, useState} from "react";
 import {Loader2} from "lucide-react";
 import {Popover, PopoverContent, PopoverTrigger} from "@/components/ui/popover";
 import {cn} from "@/lib/utils";
-import {Tooltip, TooltipContent, TooltipTrigger} from "@/components/ui/tooltip";
+import {Tooltip, TooltipContent, TooltipProvider, TooltipTrigger} from "@/components/ui/tooltip";
 
 export type ButtonWithConfirmProps = {
     title: string;
     description: string;
-    button: {
+    button?: {
         main: {
             className?: string;
             type?: "button" | "submit" | "reset" | undefined;
@@ -37,6 +37,11 @@ export type ButtonWithConfirmProps = {
             onClick?: () => void;
         };
     };
+    children?: ReactNode;
+    onConfirm?: (e: React.MouseEvent) => void;
+    onCancel?: (e: React.MouseEvent) => void;
+    confirmButtonText?: string;
+    cancelButtonText?: string;
     isPending?: boolean;
 };
 
@@ -44,41 +49,86 @@ export type ButtonWithConfirmProps = {
 export const ButtonWithConfirm = (props: ButtonWithConfirmProps) => {
     const [isConfirming, setIsConfirming] = useState(false);
 
-    return (
-        <Popover open={isConfirming} onOpenChange={!props.button.main.disabled ? setIsConfirming : undefined}>
+    const isLegacy = !!props.button;
+    const isDisabled = isLegacy ? !!props.button?.main.disabled : false;
+
+    const handleConfirm = (e: React.MouseEvent) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (isLegacy) {
+            props.button?.confirm.onClick?.();
+        } else {
+            props.onConfirm?.(e);
+        }
+        setIsConfirming(false);
+    };
+
+    const handleCancel = (e: React.MouseEvent) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (isLegacy) {
+            props.button?.cancel.onClick?.();
+        } else {
+            props.onCancel?.(e);
+        }
+        setIsConfirming(false);
+    };
+
+    const triggerContent = isLegacy ? (
+        <Button
+            type={props.button?.main.type}
+            disabled={isDisabled}
+            variant={props.button?.main.variant ?? "default"}
+            size={props.button?.main.size ?? "default"}
+            className={props.button?.main.className}
+            onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                if (!isDisabled) setIsConfirming(true);
+            }}
+        >
+            {props.isPending && <Loader2 className="animate-spin mr-4" size={16}/>}
+            {props.button?.main.icon}
+            {props.button?.main.text && <span>{props.button.main.text}</span>}
+        </Button>
+    ) : (
+        <div onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            setIsConfirming(true);
+        }}>
+            {props.children}
+        </div>
+    );
+
+    const withTooltip = isLegacy && props.button?.main.tooltipText && isDisabled ? (
+        <TooltipProvider>
             <Tooltip>
                 <TooltipTrigger asChild>
-                    <PopoverTrigger asChild>
-                        <span
-                            className={cn(
-                                "inline-flex",
-                                props.button.main.disabled ? "cursor-not-allowed" : ""
-                            )}
-                            role="button">
-                          <Button
-                              type={props.button.main.type}
-                              disabled={!!props.button.main.disabled}
-                              variant={props.button.main.variant ?? "default"}
-                              size={props.button.main.size ?? "default"}
-                              className={props.button.main.className}
-                              onClick={() => {
-                                  if (!props.button.main.disabled) setIsConfirming(true);
-                              }}
-                          >
-                              {props.isPending && <Loader2 className="animate-spin mr-4" size={16}/>}
-                              {props.button.main.icon}
-                              {props.button.main.text && <span>{props.button.main.text}</span>}
-                          </Button>
-                        </span>
-                    </PopoverTrigger>
+                    <div>{triggerContent}</div>
                 </TooltipTrigger>
-                {props.button.main.tooltipText && props.button.main.disabled && (
-                    <TooltipContent>
-                        <p>{props.button.main.tooltipText}</p>
-                    </TooltipContent>
-                )}
+                <TooltipContent>
+                    <p>{props.button?.main.tooltipText}</p>
+                </TooltipContent>
             </Tooltip>
-            <PopoverContent className="w-80">
+        </TooltipProvider>
+    ) : triggerContent;
+
+    return (
+        <Popover open={isConfirming} onOpenChange={setIsConfirming}>
+            <PopoverTrigger asChild>
+                {withTooltip}
+            </PopoverTrigger>
+            <PopoverContent 
+                className="w-80" 
+                onPointerDownOutside={(e) => e.preventDefault()}
+                onInteractOutside={(e) => e.preventDefault()}
+                onClick={(e) => e.stopPropagation()}
+                onMouseMove={(e) => e.stopPropagation()}
+                onMouseEnter={(e) => e.stopPropagation()}
+                onMouseLeave={(e) => e.stopPropagation()}
+                onOpenAutoFocus={(e) => e.preventDefault()}
+            >
                 <div className="grid gap-4">
                     <div className="space-y-2">
                         <h4 className="font-medium leading-none">{props.title}</h4>
@@ -86,34 +136,26 @@ export const ButtonWithConfirm = (props: ButtonWithConfirmProps) => {
                     </div>
                     <div className="grid gap-2">
                         <Button
-                            onClick={() => {
-                                if (isConfirming && props.button.confirm.onClick) {
-                                    props.button.confirm.onClick();
-                                    setIsConfirming(false);
-                                } else {
-                                    setIsConfirming(true);
-                                }
-                            }}
-                            variant={props.button.confirm.variant ? props.button.confirm.variant : "default"}
-                            size={props.button.main.size ?? "default"}
-                            className={cn(props.button.main.className, "w-full")}
+                            onClick={handleConfirm}
+                            variant={isLegacy ? (props.button?.confirm.variant ?? "default") : "default"}
+                            size={isLegacy ? (props.button?.main.size ?? "default") : "default"}
+                            className={cn(isLegacy ? props.button?.main.className : "", "w-full")}
                         >
                             {props.isPending && <Loader2 className="animate-spin mr-4" size={16}/>}
-                            {props.button.confirm.icon ? props.button.confirm.icon : null}
-                            <span>{props.button.confirm.text}</span>
+                            {isLegacy && props.button?.confirm.icon}
+                            <span>{isLegacy ? props.button?.confirm.text : (props.confirmButtonText ?? "Confirm")}</span>
                         </Button>
                         <Button
-                            variant={props.button.cancel.variant ? props.button.cancel.variant : "default"}
-                            onClick={props.button.cancel.onClick ? () => props.button.cancel.onClick!() : () => setIsConfirming(false)}
-                            className={cn(props.button.main.className, "w-full")}
-                            size={props.button.main.size ?? "default"}
+                            variant={isLegacy ? (props.button?.cancel.variant ?? "outline") : "outline"}
+                            onClick={handleCancel}
+                            className={cn(isLegacy ? props.button?.main.className : "", "w-full")}
+                            size={isLegacy ? (props.button?.main.size ?? "default") : "default"}
                         >
-                            Cancel
+                            {isLegacy ? (props.button?.cancel.text ?? "Cancel") : (props.cancelButtonText ?? "Cancel")}
                         </Button>
                     </div>
                 </div>
             </PopoverContent>
         </Popover>
     );
-};
-
+};

src/components/wrappers/common/button/button-with-loading.tsx

@@ -83,7 +83,7 @@ export type ButtonWithLoadingProps = {
     icon?: ReactNode;
     variant?: keyof VariantButton;
     className?: string;
-    onClick?: () => void;
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
     isPending?: boolean;
     size?: keyof SizeButton;
 } & ButtonHTMLAttributes<HTMLButtonElement>;
@@ -100,7 +100,7 @@ export const ButtonWithLoading = ({
                                   }: ButtonWithLoadingProps) => {
     return (
         <Button
-            onClick={() => onClick?.()}
+            onClick={(e) => onClick?.(e)}
             variant={variant}
             className={className}
             size={size}

src/components/wrappers/common/button/copy-button.tsx

@@ -26,7 +26,6 @@ export const CopyButton = (props: CopyButtonProps) => {
 
     return (
         <Button
-            // className={cn(buttonVariants({size: "sm"}))}
             onClick={() => {
                 copyToClipboardWithMeta(value);
                 setHasCopied(true);