Adds copy to other titles (#1477)

## Description

Added copy functionality to pipeline names in the UI. The `CopyText` component now has an `alwaysShowButton` prop that keeps the copy button visible at all times rather than only on hover. This enhancement has been implemented in both the Pipeline Details and Run Details views, allowing users to easily copy pipeline names.

## Type of Change

- [x] Improvement
- [x] New feature

## Checklist

- [x] I have tested this does not break current pipelines / runs functionality
- [x] I have tested the changes on staging

## Screenshots (if applicable)  
Before:![Screenshot 2025-12-05 at 1.47.50 PM.png](https://app.graphite.com/user-attachments/assets/661bc833-86fe-4cc8-ab13-1d71e0316b46.png)



##   
  
After



![Screenshot 2025-12-05 at 1.47.25 PM.png](https://app.graphite.com/user-attachments/assets/0a1cb2ac-96ff-4d4d-a686-937a16dbbd86.png)

Bef

## Test Instructions

1. Navigate to a pipeline in the editor view
2. Verify the copy button is always visible next to the pipeline name
3. Click the copy button and confirm the pipeline name is copied to clipboard
4. Navigate to a pipeline run view
5. Verify the same copy functionality works for the pipeline name in this view

## Additional Comments

This change improves user experience by making it more obvious that pipeline names can be copied, rather than requiring users to discover this functionality by hovering.

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

@@ -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>
+);