Adds copy to other titles

Author: Mbeaulne

src/components/Editor/PipelineDetails.tsx

@@ -3,6 +3,7 @@ import { useEffect, useState } from "react";
 
 import { PipelineValidationList } from "@/components/Editor/components/PipelineValidationList/PipelineValidationList";
 import { useValidationIssueNavigation } from "@/components/Editor/hooks/useValidationIssueNavigation";
+import { CopyText } from "@/components/shared/CopyText/CopyText";
 import { Button } from "@/components/ui/button";
 import { Icon } from "@/components/ui/icon";
 import { InlineStack } from "@/components/ui/layout";
@@ -134,9 +135,9 @@ const PipelineDetails = () => {
       {/* Header */}
       <div className="flex items-center gap-2 max-w-[90%]">
         <Network className="w-6 h-6 text-secondary-foreground rotate-270 min-w-6 min-h-6" />
-        <h2 className="text-lg font-semibold" data-testid="pipeline-name">
+        <CopyText className="text-lg font-semibold" alwaysShowButton>
           {componentSpec.name ?? "Unnamed Pipeline"}
-        </h2>
+        </CopyText>
         <RenamePipeline />
       </div>
 

src/components/PipelineRun/RunDetails.tsx

@@ -1,5 +1,6 @@
 import { Frown, Videotape } from "lucide-react";
 
+import { CopyText } from "@/components/shared/CopyText/CopyText";
 import { Spinner } from "@/components/ui/spinner";
 import { useCheckComponentSpecFromPath } from "@/hooks/useCheckComponentSpecFromPath";
 import { useUserDetails } from "@/hooks/useUserDetails";
@@ -84,9 +85,9 @@ export const RunDetails = () => {
     <div className="p-2 flex flex-col gap-6 h-full">
       <div className="flex items-center gap-2 max-w-[90%]">
         <Videotape className="w-6 h-6 text-gray-500" />
-        <h2 className="text-lg font-semibold">
+        <CopyText className="text-lg font-semibold" alwaysShowButton>
           {componentSpec.name ?? "Unnamed Pipeline"}
-        </h2>
+        </CopyText>
         <StatusIcon status={runStatus} tooltip />
       </div>
 

src/components/shared/CopyText/CopyText.tsx

@@ -14,12 +14,14 @@ interface CopyTextProps {
   children: string;
   className?: string;
   showButton?: boolean;
+  alwaysShowButton?: boolean;
 }
 
 export const CopyText = ({
   children,
   className,
   showButton = true,
+  alwaysShowButton = false,
 }: CopyTextProps) => {
   const [isCopied, setIsCopied] = useState(false);
   const [isFlashing, setIsFlashing] = useState(false);
@@ -81,12 +83,17 @@ export const CopyText = ({
             variant="ghost"
             size="icon"
             className={cn(
-              "h-6 w-6 shrink-0 opacity-0 transition-opacity group-hover:opacity-100",
-              isCopied && "opacity-100",
+              "h-6 w-6 shrink-0 transition-opacity duration-200",
+              alwaysShowButton || isCopied
+                ? "opacity-100"
+                : "opacity-0 group-hover:opacity-100",
             )}
             onClick={handleButtonClick}
           >
-            <CopyIcon isCopied={isCopied} isHovered={isHovered} />
+            <CopyIcon
+              isCopied={isCopied}
+              alwaysShow={alwaysShowButton || isHovered}
+            />
           </Button>
         )}
       </InlineStack>
@@ -96,10 +103,10 @@ export const CopyText = ({
 
 interface CopyIconProps {
   isCopied: boolean;
-  isHovered: boolean;
+  alwaysShow: boolean;
 }
 
-const CopyIcon = ({ isCopied, isHovered }: CopyIconProps) => (
+const CopyIcon = ({ isCopied, alwaysShow }: CopyIconProps) => (
   <span className="relative h-3.5 w-3.5">
     <Icon
       name="Check"
@@ -114,7 +121,7 @@ const CopyIcon = ({ isCopied, isHovered }: CopyIconProps) => (
       size="sm"
       className={cn(
         "absolute inset-0 text-muted-foreground transition-all duration-200",
-        isHovered && !isCopied
+        alwaysShow && !isCopied
           ? "rotate-0 scale-100 opacity-100"
           : "rotate-90 scale-0 opacity-0",
       )}