From 22d43ee068d55870b06f3807016c639f4212d343 Mon Sep 17 00:00:00 2001
From: Vivian Leung <vivz753@gmail.com>
Date: Fri, 9 May 2025 11:31:29 +0200
Subject: [PATCH] Blocklist: Wrap table rows in table body, add key directive
 (#104383)

Fix a potential hydration issue warning from vite, by adding the `key`
attribute to each table row.

Reviewed-on: https://projects.blender.org/studio/flamenco/pulls/104383
---
 web/app/src/components/StatusFilterBar.vue  |  1 +
 web/app/src/components/jobs/Blocklist.vue   | 40 +++++++++++----------
 web/app/src/components/jobs/TaskDetails.vue |  4 +--
 3 files changed, 24 insertions(+), 21 deletions(-)

diff --git a/web/app/src/components/StatusFilterBar.vue b/web/app/src/components/StatusFilterBar.vue
index 813556fd..165363db 100644
--- a/web/app/src/components/StatusFilterBar.vue
+++ b/web/app/src/components/StatusFilterBar.vue
@@ -21,6 +21,7 @@ const visibleStatuses = computed(() => {
   <ul class="status-filter-bar" :class="{ 'is-filtered': activeStatuses.length > 0 }">
     <li
       v-for="status in visibleStatuses"
+      :key="status.value"
       class="status-filter-indicator"
       :data-status="status"
       :class="{ active: activeStatuses.indexOf(status) >= 0 }"
diff --git a/web/app/src/components/jobs/Blocklist.vue b/web/app/src/components/jobs/Blocklist.vue
index dbaa4621..c4cd66ca 100644
--- a/web/app/src/components/jobs/Blocklist.vue
+++ b/web/app/src/components/jobs/Blocklist.vue
@@ -4,25 +4,27 @@
   </div>
   <template v-else>
     <table class="blocklist" v-if="blocklist.length">
-      <tr>
-        <th>Worker</th>
-        <th>Task Type</th>
-        <th></th>
-      </tr>
-      <tr v-for="entry in blocklist">
-        <td>
-          <link-worker :worker="{ id: entry.worker_id, name: entry.worker_name }" />
-        </td>
-        <td>{{ entry.task_type }}</td>
-        <td>
-          <button
-            class="btn in-table-row"
-            @click="removeBlocklistEntry(entry)"
-            title="Allow this worker to execute these task types">
-            ❌
-          </button>
-        </td>
-      </tr>
+      <tbody>
+        <tr>
+          <th>Worker</th>
+          <th>Task Type</th>
+          <th></th>
+        </tr>
+        <tr v-for="entry in blocklist" :key="entry.worker_id">
+          <td>
+            <link-worker :worker="{ id: entry.worker_id, name: entry.worker_name }" />
+          </td>
+          <td>{{ entry.task_type }}</td>
+          <td>
+            <button
+              class="btn in-table-row"
+              @click="removeBlocklistEntry(entry)"
+              title="Allow this worker to execute these task types">
+              ❌
+            </button>
+          </td>
+        </tr>
+      </tbody>
     </table>
     <div v-else class="dl-no-data">
       <span>This job has no blocked workers.</span>
diff --git a/web/app/src/components/jobs/TaskDetails.vue b/web/app/src/components/jobs/TaskDetails.vue
index 5c8d187b..2fda8b1d 100644
--- a/web/app/src/components/jobs/TaskDetails.vue
+++ b/web/app/src/components/jobs/TaskDetails.vue
@@ -23,7 +23,7 @@
       <template v-if="taskData.failed_by_workers.length > 0">
         <dt class="field-failed-by-workers" title="Failed by Workers">Failed by Workers</dt>
         <dd>
-          <div v-for="worker in taskData.failed_by_workers">
+          <div :key="worker.id" v-for="worker in taskData.failed_by_workers">
             <link-worker :worker="worker" />
           </div>
         </dd>
@@ -50,7 +50,7 @@
 
     <h3 class="sub-title">Commands</h3>
     <dl>
-      <template v-for="cmd in taskData.commands">
+      <template :key="cmd.name" v-for="cmd in taskData.commands">
         <dt :class="`field-${cmd.name}`" :title="cmd.name">{{ cmd.name }}</dt>
         <dd>{{ cmd.parameters }}</dd>
       </template>