Adds copy to other titles

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

@@ -10,9 +10,14 @@ import { copyToClipboard } from "@/utils/string";
 interface CopyTextProps {
   children: string;
   className?: string;
+  alwaysShowButton?: boolean;
 }
 
-export const CopyText = ({ children, className }: CopyTextProps) => {
+export const CopyText = ({
+  children,
+  className,
+  alwaysShowButton = false,
+}: CopyTextProps) => {
   const [isCopied, setIsCopied] = useState(false);
   const [isHovered, setIsHovered] = useState(false);
 
@@ -34,7 +39,6 @@ export const CopyText = ({ children, className }: CopyTextProps) => {
   }, []);
 
   return (
-
     <div
       className="group cursor-pointer"
       onClick={handleCopy}
@@ -54,40 +58,53 @@ export const CopyText = ({ children, className }: CopyTextProps) => {
         </Text>
 
         <Button
-          variant={null}
+          variant="ghost"
           size="icon"
           className={cn(
-            "h-4 w-4 shrink-0 transition-opacity duration-200",
-            isCopied ? "opacity-100" : "opacity-0 group-hover:opacity-100",
+            "h-6 w-6 shrink-0 transition-opacity duration-200",
+            alwaysShowButton || isCopied
+              ? "opacity-100"
+              : "opacity-0 group-hover:opacity-100",
           )}
           onClick={handleButtonClick}
         >
-          <span className="relative h-3 w-3">
-            {isCopied ? (
-              <span
-                key="check"
-                className="absolute inset-0 animate-revert-copied"
-                onAnimationEnd={handleAnimationEnd}
-              >
-                <Icon name="Check" size="sm" className="text-emerald-400" />
-              </span>
-            ) : (
-              <Icon
-                key="copy"
-                name="Copy"
-                size="sm"
-                className={cn(
-                  "absolute inset-0 text-muted-foreground transition-all duration-200",
-                  isHovered
-                    ? "rotate-0 scale-100 opacity-100"
-                    : "rotate-90 scale-0 opacity-0",
-                )}
-              />
-            )}
-          </span>
+          <CopyIcon
+            isCopied={isCopied}
+            alwaysShow={alwaysShowButton || isHovered}
+            onAnimationEnd={handleAnimationEnd}
+          />
         </Button>
       </InlineStack>
     </div>
-
   );
 };
+
+interface CopyIconProps {
+  isCopied: boolean;
+  alwaysShow: boolean;
+  onAnimationEnd: () => void;
+}
+//
+const CopyIcon = ({ isCopied, alwaysShow, onAnimationEnd }: CopyIconProps) => (
+  <span className="relative h-3.5 w-3.5">
+    {isCopied ? (
+      <span
+        className="absolute inset-0 animate-revert-copied"
+        onAnimationEnd={onAnimationEnd}
+      >
+        <Icon name="Check" size="sm" className="text-emerald-400" />
+      </span>
+    ) : (
+      <Icon
+        name="Copy"
+        size="sm"
+        className={cn(
+          "absolute inset-0 text-muted-foreground transition-all duration-200",
+          alwaysShow
+            ? "rotate-0 scale-100 opacity-100"
+            : "rotate-90 scale-0 opacity-0",
+        )}
+      />
+    )}
+  </span>
+);