iris: add job name copy btn (#3651)

Add job name copy button to the jobs and job view.

Author: ravwojdyla

lib/iris/dashboard/src/components/controller/JobDetail.vue

@@ -33,6 +33,15 @@ const tasks = ref<TaskStatus[]>([])
 const loading = ref(true)
 const error = ref<string | null>(null)
 const profilingTaskId = ref<string | null>(null)
+const copiedName = ref(false)
+
+async function copyJobName() {
+  const name = job.value?.name
+  if (!name) return
+  await navigator.clipboard.writeText(name)
+  copiedName.value = true
+  setTimeout(() => { copiedName.value = false }, 1500)
+}
 
 // -- Fetch --
 
@@ -210,6 +219,24 @@ async function handleProfile(taskId: string, profilerType: string, format: strin
 
 <template>
   <PageShell :title="pageTitle" back-to="/" back-label="Jobs">
+    <template v-if="job?.name" #title-suffix>
+      <button
+        class="inline-flex items-center gap-1 px-1.5 py-0.5 text-xs text-text-muted hover:text-text
+               border border-surface-border rounded hover:bg-surface-raised transition-colors"
+        title="Copy job name"
+        @click="copyJobName"
+      >
+        <svg v-if="copiedName" class="w-3 h-3 text-status-success" viewBox="0 0 20 20" fill="currentColor">
+          <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
+        </svg>
+        <svg v-else class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
+          <path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" />
+        </svg>
+        {{ copiedName ? 'Copied' : 'Copy name' }}
+      </button>
+    </template>
+
     <!-- Subtitle (job ID when name differs) -->
     <p v-if="subtitle" class="text-sm text-text-secondary font-mono -mt-4 mb-6">
       {{ subtitle }}

lib/iris/dashboard/src/components/controller/JobsTab.vue

@@ -22,6 +22,14 @@ const SORT_FIELD_MAP: Record<string, string> = {
 type SortField = 'date' | 'name' | 'state' | 'failures' | 'preemptions'
 type SortDir = 'asc' | 'desc'
 
+const copiedJob = ref<string | null>(null)
+
+async function copyJobName(name: string) {
+  await navigator.clipboard.writeText(name)
+  copiedJob.value = name
+  setTimeout(() => { copiedJob.value = null }, 1500)
+}
+
 const EXPANDED_JOBS_KEY = 'iris.controller.expandedJobs'
 
 // -- State --
@@ -359,7 +367,7 @@ function sortIndicator(field: SortField): string {
         <tr
           v-for="node in flattenedJobs"
           :key="node.job.jobId"
-          class="border-b border-surface-border-subtle hover:bg-surface-raised transition-colors"
+          class="group/row border-b border-surface-border-subtle hover:bg-surface-raised transition-colors"
         >
           <!-- Name -->
           <td
@@ -381,6 +389,20 @@ function sortIndicator(field: SortField): string {
               >
                 {{ node.depth > 0 ? getLeafName(node.job.name) : (node.job.name || 'unnamed') }}
               </RouterLink>
+              <button
+                v-if="node.job.name"
+                class="ml-1 text-text-muted hover:text-text opacity-0 group-hover/row:opacity-100 transition-opacity"
+                title="Copy job name"
+                @click.stop="copyJobName(node.job.name)"
+              >
+                <svg v-if="copiedJob === node.job.name" class="w-3.5 h-3.5 text-status-success" viewBox="0 0 20 20" fill="currentColor">
+                  <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
+                </svg>
+                <svg v-else class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
+                  <path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" />
+                </svg>
+              </button>
             </span>
           </td>
 

lib/iris/dashboard/src/components/layout/PageShell.vue

@@ -19,7 +19,10 @@ defineProps<{
         &larr; {{ backLabel ?? 'Back' }}
       </RouterLink>
     </div>
-    <h2 class="text-xl font-semibold text-text font-mono mb-6">{{ title }}</h2>
+    <div class="flex items-center gap-2 mb-6">
+      <h2 class="text-xl font-semibold text-text font-mono">{{ title }}</h2>
+      <slot name="title-suffix" />
+    </div>
     <slot />
   </div>
 </template>