Repository: chaoss/grimoirelab-sortinghat (language: python)

Issue:
Split identities only adds them to the workspace once
When an individuals is split into many others, they are shown in the workspace. They will be shown the first time only. If the user does it with other individuals or the same, nothing will shown in the workspace.

See the video to reproduce the error:

[sh_workspace.webm](https://github.com/user-attachments/assets/ce86cbf6-62d4-45ac-9de6-aa591976f49e)



Discussion / hints:

Fix patch:
diff --git a/releases/unreleased/update-workspace-when-identities-are-split.yml b/releases/unreleased/update-workspace-when-identities-are-split.yml
new file mode 100644
index 00000000..d3c5a09f
--- /dev/null
+++ b/releases/unreleased/update-workspace-when-identities-are-split.yml
@@ -0,0 +1,9 @@
+---
+title: Update workspace when identities are split
+category: fixed
+author: Eva Millán <evamillan@bitergia.com>
+issue: 919
+notes: >
+  When an individual's identities are split, they are shown in the workspace,
+  but they were only shown the first time. The workspace is now updated
+  with the new individuals every time.
diff --git a/ui/src/components/IndividualCard.vue b/ui/src/components/IndividualCard.vue
index 13b8a292..3b573ed9 100644
--- a/ui/src/components/IndividualCard.vue
+++ b/ui/src/components/IndividualCard.vue
@@ -64,7 +64,9 @@
             icon="mdi-magnify-plus-outline"
             v-bind="props"
             data-cy="expand-button"
+            aria-label="Expand information"
             @mousedown.stop
+            @keyup.stop
           />
         </template>
         <v-card class="pa-1">
@@ -81,6 +83,7 @@
         icon="mdi-close"
         density="compact"
         variant="text"
+        aria-label="Remove"
         @click.stop="$emit('remove')"
         @mousedown.stop
       />
diff --git a/ui/src/components/WorkSpace.vue b/ui/src/components/WorkSpace.vue
index e102a78d..4830cc68 100644
--- a/ui/src/components/WorkSpace.vue
+++ b/ui/src/components/WorkSpace.vue
@@ -14,50 +14,31 @@
         Workspace
       </h3>
       <div>
-        <v-tooltip bottom transition="expand-y-transition" open-delay="200">
-          <template v-slot:activator="{ props }">
-            <v-btn
-              variant="outlined"
-              size="small"
-              class="mr-2"
-              :v-bind="props"
-              :disabled="isDisabled"
-              @click="mergeSelected(selectedIndividuals)"
-            >
-              <v-icon size="small" start>mdi-call-merge</v-icon>
-              Merge
-            </v-btn>
-          </template>
-          <span>Merge selected</span>
-        </v-tooltip>
-        <v-tooltip bottom transition="expand-y-transition" open-delay="200">
-          <template v-slot:activator="{ props }">
-            <v-btn
-              variant="outlined"
-              size="small"
-              :disabled="savedIndividuals.length === 0"
-              :v-bind="props"
-              @click="clearSpace"
-            >
-              <v-icon size="small" start>mdi-cancel</v-icon>
-              Clear
-            </v-btn>
-          </template>
-          <span>Clear space</span>
-        </v-tooltip>
+        <v-btn
+          variant="outlined"
+          size="small"
+          class="mr-2"
+          :disabled="isDisabled"
+          @click="mergeSelected(selectedIndividuals)"
+        >
+          <v-icon size="small" start>mdi-call-merge</v-icon>
+          Merge
+        </v-btn>
+        <v-btn
+          variant="outlined"
+          size="small"
+          :disabled="savedIndividuals.length === 0"
+          @click="clearSpace"
+        >
+          <v-icon size="small" start>mdi-cancel</v-icon>
+          Clear
+        </v-btn>
       </div>
     </v-row>
-    <v-row
-      v-if="savedIndividuals.length >= 1"
-      dense
-      class="space rounded pa-md-2 ma-md-3 drag-zone"
-    >
-      <v-col
-        v-for="individual in savedIndividuals"
-        :key="individual.id"
-        cols="2"
-      >
+    <ul class="grid drag-zone" v-if="savedIndividuals.length >= 1">
+      <li v-for="individual in savedIndividuals" :key="individual.id">
         <individual-card
+          tabindex="0"
           :name="individual.name"
           :email="individual.email"
           :sources="individual.sources"
@@ -67,7 +48,9 @@
           :enrollments="individual.enrollments"
           :is-highlighted="individual.uuid === highlightIndividual"
           :is-locked="individual.isLocked"
+          :aria-pressed="isSelected(individual)"
           @enroll="confirmEnroll(individual, $event)"
+          @keyup.enter="selectIndividual(individual)"
           @merge="mergeSelected($event)"
           @mouseenter="$emit('highlight', individual)"
           @mouseleave="$emit('stopHighlight', individual)"
@@ -77,12 +60,12 @@
           closable
           selectable
         />
-      </v-col>
-    </v-row>
+      </li>
+    </ul>
     <v-row
       v-else
       dense
-      class="space pa-md-2 ma-md-3 align-center justify-center drag-zone"
+      class="align-center justify-center drag-zone"
     >
       <v-icon color="rgba(0,0,0,0.38)" left> mdi-lightbulb-on-outline </v-icon>
       <p class="mb-0 ml-2 text-medium-emphasis">
@@ -240,6 +223,7 @@ export default {
           remove: fromUuids,
         });
         this.$logger.debug("Merged individuals", { fromUuids, toUuid });
+        this.selectedIndividuals = [];
       }
       this.dialog.open = false;
     },
@@ -330,13 +314,19 @@ export default {
     },
   },
   watch: {
-    individuals(value) {
-      this.savedIndividuals = value;
+    individuals: {
+      handler(value) {
+        this.savedIndividuals = value;
+      },
+      deep: true,
     },
-    savedIndividuals(value) {
-      if (value) {
-        this.$emit("updateStore", value);
-      }
+    savedIndividuals: {
+      handler(value) {
+        if (value) {
+          this.$emit("updateStore", value);
+        }
+      },
+      deep: true,
     },
   },
 };
@@ -344,17 +334,23 @@ export default {
 <style lang="scss" scoped>
 @import "../styles/index.scss";
 .drag-zone {
-  min-height: 126px;
+  min-height: 146px;
+  transition: background-color 0.1s;
 }
 .is-dragging .drag-zone {
   outline: 1px dashed #003756;
   background-color: #f9edc7;
 }
-.v-col-2 {
-  min-width: 300px;
-}
-.space {
-  background-color: #ffffff;
-  transition: background-color 0.1s;
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
+  grid-column-gap: 1rem;
+  grid-row-gap: 1rem;
+  padding: 1.5rem;
+
+  li {
+    list-style: none;
+  }
 }
 </style>


Test patch:
diff --git a/ui/tests/unit/__snapshots__/storybook.spec.js.snap b/ui/tests/unit/__snapshots__/storybook.spec.js.snap
index 215d8a57..ea5e3336 100644
--- a/ui/tests/unit/__snapshots__/storybook.spec.js.snap
+++ b/ui/tests/unit/__snapshots__/storybook.spec.js.snap
@@ -6168,6 +6168,7 @@ exports[`Storybook Tests IndividualCard Closable 1`] = `
         <button
           aria-expanded="false"
           aria-haspopup="menu"
+          aria-label="Expand information"
           aria-owns="v-menu-1"
           class="v-btn v-btn--icon v-theme--light v-btn--density-compact v-btn--size-small v-btn--variant-text mr-1"
           data-cy="expand-button"
@@ -6199,6 +6200,7 @@ exports[`Storybook Tests IndividualCard Closable 1`] = `
         <!---->
         
         <button
+          aria-label="Remove"
           class="v-btn v-btn--icon v-theme--light v-btn--density-compact v-btn--size-small v-btn--variant-text"
           type="button"
         >
@@ -6377,6 +6379,7 @@ exports[`Storybook Tests IndividualCard Default 1`] = `
         <button
           aria-expanded="false"
           aria-haspopup="menu"
+          aria-label="Expand information"
           aria-owns="v-menu-1"
           class="v-btn v-btn--icon v-theme--light v-btn--density-compact v-btn--size-small v-btn--variant-text mr-1"
           data-cy="expand-button"
@@ -6562,6 +6565,7 @@ exports[`Storybook Tests IndividualCard Gravatar 1`] = `
         <button
           aria-expanded="false"
           aria-haspopup="menu"
+          aria-label="Expand information"
           aria-owns="v-menu-1"
           class="v-btn v-btn--icon v-theme--light v-btn--density-compact v-btn--size-small v-btn--variant-text mr-1"
           data-cy="expand-button"
@@ -6747,6 +6751,7 @@ exports[`Storybook Tests IndividualCard Highlighted 1`] = `
         <button
           aria-expanded="false"
           aria-haspopup="menu"
+          aria-label="Expand information"
           aria-owns="v-menu-1"
           class="v-btn v-btn--icon v-theme--light v-btn--density-compact v-btn--size-small v-btn--variant-text mr-1"
           data-cy="expand-button"
@@ -6932,6 +6937,7 @@ exports[`Storybook Tests IndividualCard NoName 1`] = `
         <button
           aria-expanded="false"
           aria-haspopup="menu"
+          aria-label="Expand information"
           aria-owns="v-menu-1"
           class="v-btn v-btn--icon v-theme--light v-btn--density-compact v-btn--size-small v-btn--variant-text mr-1"
           data-cy="expand-button"
@@ -7124,6 +7130,7 @@ exports[`Storybook Tests IndividualCard Organization 1`] = `
         <button
           aria-expanded="false"
           aria-haspopup="menu"
+          aria-label="Expand information"
           aria-owns="v-menu-1"
           class="v-btn v-btn--icon v-theme--light v-btn--density-compact v-btn--size-small v-btn--variant-text mr-1"
           data-cy="expand-button"
@@ -7309,6 +7316,7 @@ exports[`Storybook Tests IndividualCard Selectable 1`] = `
         <button
           aria-expanded="false"
           aria-haspopup="menu"
+          aria-label="Expand information"
           aria-owns="v-menu-1"
           class="v-btn v-btn--icon v-theme--light v-btn--density-compact v-btn--size-small v-btn--variant-text mr-1"
           data-cy="expand-button"
@@ -7494,6 +7502,7 @@ exports[`Storybook Tests IndividualCard Selected 1`] = `
         <button
           aria-expanded="false"
           aria-haspopup="menu"
+          aria-label="Expand information"
           aria-owns="v-menu-1"
           class="v-btn v-btn--icon v-theme--light v-btn--density-compact v-btn--size-small v-btn--variant-text mr-1"
           data-cy="expand-button"
@@ -7679,6 +7688,7 @@ exports[`Storybook Tests IndividualCard SingleInitial 1`] = `
         <button
           aria-expanded="false"
           aria-haspopup="menu"
+          aria-label="Expand information"
           aria-owns="v-menu-1"
           class="v-btn v-btn--icon v-theme--light v-btn--density-compact v-btn--size-small v-btn--variant-text mr-1"
           data-cy="expand-button"
@@ -7912,6 +7922,7 @@ exports[`Storybook Tests IndividualCard Sources 1`] = `
         <button
           aria-expanded="false"
           aria-haspopup="menu"
+          aria-label="Expand information"
           aria-owns="v-menu-5"
           class="v-btn v-btn--icon v-theme--light v-btn--density-compact v-btn--size-small v-btn--variant-text mr-1"
           data-cy="expand-button"
@@ -8152,6 +8163,7 @@ exports[`Storybook Tests IndividualCard SourcesAndOrganization 1`] = `
         <button
           aria-expanded="false"
           aria-haspopup="menu"
+          aria-label="Expand information"
           aria-owns="v-menu-5"
           class="v-btn v-btn--icon v-theme--light v-btn--density-compact v-btn--size-small v-btn--variant-text mr-1"
           data-cy="expand-button"
@@ -15133,6 +15145,7 @@ exports[`Storybook Tests IndividualsGrid Default 1`] = `
                 <button
                   aria-expanded="false"
                   aria-haspopup="menu"
+                  aria-label="Expand information"
                   aria-owns="v-menu-2"
                   class="v-btn v-btn--icon v-theme--light v-btn--density-compact v-btn--size-small v-btn--variant-text mr-1"
                   data-cy="expand-button"
@@ -15367,6 +15380,7 @@ exports[`Storybook Tests IndividualsGrid Default 1`] = `
                 <button
                   aria-expanded="false"
                   aria-haspopup="menu"
+                  aria-label="Expand information"
                   aria-owns="v-menu-8"
                   class="v-btn v-btn--icon v-theme--light v-btn--density-compact v-btn--size-small v-btn--variant-text mr-1"
                   data-cy="expand-button"
@@ -15565,6 +15579,7 @@ exports[`Storybook Tests IndividualsGrid Default 1`] = `
                 <button
                   aria-expanded="false"
                   aria-haspopup="menu"
+                  aria-label="Expand information"
                   aria-owns="v-menu-12"
                   class="v-btn v-btn--icon v-theme--light v-btn--density-compact v-btn--size-small v-btn--variant-text mr-1"
                   data-cy="expand-button"
@@ -15799,6 +15814,7 @@ exports[`Storybook Tests IndividualsGrid Default 1`] = `
                 <button
                   aria-expanded="false"
                   aria-haspopup="menu"
+                  aria-label="Expand information"
                   aria-owns="v-menu-18"
                   class="v-btn v-btn--icon v-theme--light v-btn--density-compact v-btn--size-small v-btn--variant-text mr-1"
                   data-cy="expand-button"
@@ -16015,6 +16031,7 @@ exports[`Storybook Tests IndividualsGrid Default 1`] = `
                 <button
                   aria-expanded="false"
                   aria-haspopup="menu"
+                  aria-label="Expand information"
                   aria-owns="v-menu-23"
                   class="v-btn v-btn--icon v-theme--light v-btn--density-compact v-btn--size-small v-btn--variant-text mr-1"
                   data-cy="expand-button"
@@ -16249,6 +16266,7 @@ exports[`Storybook Tests IndividualsGrid Default 1`] = `
                 <button
                   aria-expanded="false"
                   aria-haspopup="menu"
+                  aria-label="Expand information"
                   aria-owns="v-menu-29"
                   class="v-btn v-btn--icon v-theme--light v-btn--density-compact v-btn--size-small v-btn--variant-text mr-1"
                   data-cy="expand-button"
@@ -16483,6 +16501,7 @@ exports[`Storybook Tests IndividualsGrid Default 1`] = `
                 <button
                   aria-expanded="false"
                   aria-haspopup="menu"
+                  aria-label="Expand information"
                   aria-owns="v-menu-35"
                   class="v-btn v-btn--icon v-theme--light v-btn--density-compact v-btn--size-small v-btn--variant-text mr-1"
                   data-cy="expand-button"
@@ -16699,6 +16718,7 @@ exports[`Storybook Tests IndividualsGrid Default 1`] = `
                 <button
                   aria-expanded="false"
                   aria-haspopup="menu"
+                  aria-label="Expand information"
                   aria-owns="v-menu-40"
                   class="v-btn v-btn--icon v-theme--light v-btn--density-compact v-btn--size-small v-btn--variant-text mr-1"
                   data-cy="expand-button"
@@ -32260,6 +32280,7 @@ exports[`Storybook Tests ProfileCard Default 1`] = `
         <button
           aria-expanded="false"
           aria-haspopup="menu"
+          aria-label="Expand information"
           aria-owns="v-menu-4"
           class="v-btn v-btn--icon v-theme--light v-btn--density-compact v-btn--size-small v-btn--variant-text mr-1"
           data-cy="expand-button"
@@ -34660,13 +34681,10 @@ exports[`Storybook Tests WorkSpace Default 1`] = `
          Workspace 
       </h3>
       <div>
-        
-        
         <button
           class="v-btn v-btn--disabled v-theme--light v-btn--density-default v-btn--size-small v-btn--variant-outlined mr-2"
           disabled=""
           type="button"
-          v-bind="[object Object]"
         >
           
           <span
@@ -34694,16 +34712,9 @@ exports[`Storybook Tests WorkSpace Default 1`] = `
           <!---->
           <!---->
         </button>
-        
-        <!--teleport start-->
-        <!--teleport end-->
-        
-        
-        
         <button
           class="v-btn v-theme--light v-btn--density-default v-btn--size-small v-btn--variant-outlined"
           type="button"
-          v-bind="[object Object]"
         >
           
           <span
@@ -34731,21 +34742,17 @@ exports[`Storybook Tests WorkSpace Default 1`] = `
           <!---->
           <!---->
         </button>
-        
-        <!--teleport start-->
-        <!--teleport end-->
-        
       </div>
     </div>
-    <div
-      class="v-row v-row--dense space rounded pa-md-2 ma-md-3 drag-zone"
+    <ul
+      class="grid drag-zone"
     >
       
-      <div
-        class="v-col v-col-2"
-      >
+      <li>
         <div
+          aria-pressed="false"
           class="v-card v-card--link v-theme--light v-card--density-default v-card--variant-elevated mx-auto"
+          tabindex="0"
         >
           <!---->
           <div
@@ -34864,7 +34871,7 @@ exports[`Storybook Tests WorkSpace Default 1`] = `
                     
                     
                     <i
-                      aria-describedby="v-tooltip-5"
+                      aria-describedby="v-tooltip-3"
                       aria-hidden="true"
                       class="mdi-git mdi v-icon notranslate v-theme--light v-icon--size-small v-icon--start"
                       targetref="[object Object]"
@@ -34876,7 +34883,7 @@ exports[`Storybook Tests WorkSpace Default 1`] = `
                     
                     
                     <i
-                      aria-describedby="v-tooltip-6"
+                      aria-describedby="v-tooltip-4"
                       aria-hidden="true"
                       class="mdi-github mdi v-icon notranslate v-theme--light v-icon--size-small v-icon--start"
                       targetref="[object Object]"
@@ -34888,7 +34895,7 @@ exports[`Storybook Tests WorkSpace Default 1`] = `
                     
                     
                     <i
-                      aria-describedby="v-tooltip-7"
+                      aria-describedby="v-tooltip-5"
                       aria-hidden="true"
                       class="mdi-gitlab mdi v-icon notranslate v-theme--light v-icon--size-small v-icon--start"
                       targetref="[object Object]"
@@ -34915,7 +34922,8 @@ exports[`Storybook Tests WorkSpace Default 1`] = `
               <button
                 aria-expanded="false"
                 aria-haspopup="menu"
-                aria-owns="v-menu-8"
+                aria-label="Expand information"
+                aria-owns="v-menu-6"
                 class="v-btn v-btn--icon v-theme--light v-btn--density-compact v-btn--size-small v-btn--variant-text mr-1"
                 data-cy="expand-button"
                 targetref="[object Object]"
@@ -34946,6 +34954,7 @@ exports[`Storybook Tests WorkSpace Default 1`] = `
               <!---->
               
               <button
+                aria-label="Remove"
                 class="v-btn v-btn--icon v-theme--light v-btn--density-compact v-btn--size-small v-btn--variant-text"
                 type="button"
               >
@@ -34988,12 +34997,12 @@ exports[`Storybook Tests WorkSpace Default 1`] = `
           />
           
         </div>
-      </div>
-      <div
-        class="v-col v-col-2"
-      >
+      </li>
+      <li>
         <div
+          aria-pressed="false"
           class="v-card v-card--link v-theme--light v-card--density-default v-card--variant-elevated mx-auto"
+          tabindex="0"
         >
           <!---->
           <div
@@ -35112,7 +35121,7 @@ exports[`Storybook Tests WorkSpace Default 1`] = `
                     
                     
                     <i
-                      aria-describedby="v-tooltip-12"
+                      aria-describedby="v-tooltip-10"
                       aria-hidden="true"
                       class="mdi-git mdi v-icon notranslate v-theme--light v-icon--size-small v-icon--start"
                       targetref="[object Object]"
@@ -35124,7 +35133,7 @@ exports[`Storybook Tests WorkSpace Default 1`] = `
                     
                     
                     <i
-                      aria-describedby="v-tooltip-13"
+                      aria-describedby="v-tooltip-11"
                       aria-hidden="true"
                       class="mdi-github mdi v-icon notranslate v-theme--light v-icon--size-small v-icon--start"
                       targetref="[object Object]"
@@ -35136,7 +35145,7 @@ exports[`Storybook Tests WorkSpace Default 1`] = `
                     
                     
                     <i
-                      aria-describedby="v-tooltip-14"
+                      aria-describedby="v-tooltip-12"
                       aria-hidden="true"
                       class="mdi-account-multiple mdi v-icon notranslate v-theme--light v-icon--size-small v-icon--start"
                       targetref="[object Object]"
@@ -35163,7 +35172,8 @@ exports[`Storybook Tests WorkSpace Default 1`] = `
               <button
                 aria-expanded="false"
                 aria-haspopup="menu"
-                aria-owns="v-menu-15"
+                aria-label="Expand information"
+                aria-owns="v-menu-13"
                 class="v-btn v-btn--icon v-theme--light v-btn--density-compact v-btn--size-small v-btn--variant-text mr-1"
                 data-cy="expand-button"
                 targetref="[object Object]"
@@ -35194,6 +35204,7 @@ exports[`Storybook Tests WorkSpace Default 1`] = `
               <!---->
               
               <button
+                aria-label="Remove"
                 class="v-btn v-btn--icon v-theme--light v-btn--density-compact v-btn--size-small v-btn--variant-text"
                 type="button"
               >
@@ -35236,9 +35247,9 @@ exports[`Storybook Tests WorkSpace Default 1`] = `
           />
           
         </div>
-      </div>
+      </li>
       
-    </div>
+    </ul>
     
     <!---->
     <!---->
@@ -35272,13 +35283,10 @@ exports[`Storybook Tests WorkSpace DragAndDrop 1`] = `
            Workspace 
         </h3>
         <div>
-          
-          
           <button
             class="v-btn v-btn--disabled v-theme--light v-btn--density-default v-btn--size-small v-btn--variant-outlined mr-2"
             disabled=""
             type="button"
-            v-bind="[object Object]"
           >
             
             <span
@@ -35306,17 +35314,10 @@ exports[`Storybook Tests WorkSpace DragAndDrop 1`] = `
             <!---->
             <!---->
           </button>
-          
-          <!--teleport start-->
-          <!--teleport end-->
-          
-          
-          
           <button
             class="v-btn v-btn--disabled v-theme--light v-btn--density-default v-btn--size-small v-btn--variant-outlined"
             disabled=""
             type="button"
-            v-bind="[object Object]"
           >
             
             <span
@@ -35344,14 +35345,10 @@ exports[`Storybook Tests WorkSpace DragAndDrop 1`] = `
             <!---->
             <!---->
           </button>
-          
-          <!--teleport start-->
-          <!--teleport end-->
-          
         </div>
       </div>
       <div
-        class="v-row v-row--dense space pa-md-2 ma-md-3 align-center justify-center drag-zone"
+        class="v-row v-row--dense align-center justify-center drag-zone"
       >
         <i
           aria-hidden="true"
@@ -35489,7 +35486,7 @@ exports[`Storybook Tests WorkSpace DragAndDrop 1`] = `
               aria-expanded="null"
               aria-haspopup="menu"
               aria-label="Open menu"
-              aria-owns="v-menu-7"
+              aria-owns="v-menu-5"
               class="v-btn v-btn--flat v-btn--icon v-theme--light v-btn--density-comfortable v-btn--size-small v-btn--variant-outlined"
               style="height: 34px;"
               targetref="[object Object]"
@@ -35571,7 +35568,7 @@ exports[`Storybook Tests WorkSpace DragAndDrop 1`] = `
               <button
                 aria-expanded="false"
                 aria-haspopup="menu"
-                aria-owns="v-menu-11"
+                aria-owns="v-menu-9"
                 class="v-btn v-theme--light v-btn--density-default v-btn--size-small v-btn--variant-outlined text-body-1"
                 style="height: 32px;"
                 targetref="[object Object]"
@@ -35677,7 +35674,7 @@ exports[`Storybook Tests WorkSpace DragAndDrop 1`] = `
                   <!---->
                   <label
                     class="v-label v-field-label"
-                    for="input-10"
+                    for="input-8"
                   >
                     <!---->
                     
@@ -35688,9 +35685,9 @@ exports[`Storybook Tests WorkSpace DragAndDrop 1`] = `
                   
                   <!---->
                   <input
-                    aria-describedby="input-10-messages"
+                    aria-describedby="input-8-messages"
                     class="v-field__input"
-                    id="input-10"
+                    id="input-8"
                     outlined=""
                     size="1"
                     type="text"
@@ -35749,7 +35746,7 @@ exports[`Storybook Tests WorkSpace DragAndDrop 1`] = `
                 aria-live="polite"
                 class="v-messages"
                 css="true"
-                id="input-10-messages"
+                id="input-8-messages"
                 name="slide-y-transition"
                 persisted="false"
                 role="alert"
@@ -35776,7 +35773,7 @@ exports[`Storybook Tests WorkSpace DragAndDrop 1`] = `
               
               
               <button
-                aria-describedby="v-tooltip-15"
+                aria-describedby="v-tooltip-13"
                 class="v-btn v-theme--light v-btn--density-default v-btn--size-small v-btn--variant-outlined text-body-1"
                 depressed=""
                 style="height: 32px;"
@@ -35823,7 +35820,7 @@ exports[`Storybook Tests WorkSpace DragAndDrop 1`] = `
               <div
                 aria-expanded="false"
                 aria-haspopup="listbox"
-                aria-owns="v-menu-18"
+                aria-owns="v-menu-16"
                 class="v-field v-field--appended v-field--center-affix v-field--single-line v-field--variant-outlined v-theme--light v-locale--is-ltr"
                 role="combobox"
               >
@@ -35876,7 +35873,7 @@ exports[`Storybook Tests WorkSpace DragAndDrop 1`] = `
                   <!---->
                   <label
                     class="v-label v-field-label"
-                    for="input-14"
+                    for="input-12"
                   >
                     <!---->
                     
@@ -35901,10 +35898,10 @@ exports[`Storybook Tests WorkSpace DragAndDrop 1`] = `
                     
                     
                     <input
-                      aria-describedby="input-14-messages"
+                      aria-describedby="input-12-messages"
                       aria-label="Open"
                       attach=""
-                      id="input-14"
+                      id="input-12"
                       inputmode="none"
                       outlined=""
                       size="1"
@@ -35957,7 +35954,7 @@ exports[`Storybook Tests WorkSpace DragAndDrop 1`] = `
                 aria-live="polite"
                 class="v-messages"
                 css="true"
-                id="input-14-messages"
+                id="input-12-messages"
                 name="slide-y-transition"
                 persisted="false"
                 role="alert"
@@ -35972,7 +35969,7 @@ exports[`Storybook Tests WorkSpace DragAndDrop 1`] = `
         
         
         <button
-          aria-describedby="v-tooltip-19"
+          aria-describedby="v-tooltip-17"
           class="v-btn v-btn--disabled v-theme--light v-btn--density-compact v-btn--size-small v-btn--variant-outlined mr-4 ml-4 order-2"
           data-cy="merge-button"
           disabled=""
@@ -36013,7 +36010,7 @@ exports[`Storybook Tests WorkSpace DragAndDrop 1`] = `
         
         
         <button
-          aria-describedby="v-tooltip-21"
+          aria-describedby="v-tooltip-19"
           class="v-btn v-btn--disabled v-theme--light v-btn--density-compact v-btn--size-small v-btn--variant-outlined order-3"
           data-cy="delete-button"
           disabled=""
@@ -36097,7 +36094,7 @@ exports[`Storybook Tests WorkSpace DragAndDrop 1`] = `
                         />
                         <input
                           aria-disabled="false"
-                          id="input-23"
+                          id="input-21"
                           type="checkbox"
                           value="true"
                         />
@@ -36262,7 +36259,7 @@ exports[`Storybook Tests WorkSpace DragAndDrop 1`] = `
                         
                         
                         <i
-                          aria-describedby="v-tooltip-29"
+                          aria-describedby="v-tooltip-27"
                           aria-hidden="false"
                           class="mdi-robot mdi v-icon notranslate v-theme--light v-icon--size-x-small v-icon--clickable v-icon--end icon--hidden"
                           role="button"
@@ -36277,7 +36274,7 @@ exports[`Storybook Tests WorkSpace DragAndDrop 1`] = `
                         
                         
                         <i
-                          aria-describedby="v-tooltip-30"
+                          aria-describedby="v-tooltip-28"
                           aria-hidden="false"
                           class="mdi-lock mdi v-icon notranslate v-theme--light v-icon--size-x-small v-icon--clickable v-icon--end icon--hidden"
                           role="button"
@@ -36313,7 +36310,7 @@ exports[`Storybook Tests WorkSpace DragAndDrop 1`] = `
                   
                   
                   <span
-                    aria-describedby="v-tooltip-31"
+                    aria-describedby="v-tooltip-29"
                     class="v-chip v-theme--light v-chip--density-default v-chip--size-default v-chip--variant-outlined ma-1"
                     draggable="false"
                     style="color: rgb(54, 60, 66); caret-color: #363c42;"
@@ -36349,7 +36346,7 @@ exports[`Storybook Tests WorkSpace DragAndDrop 1`] = `
                   
                   
                   <span
-                    aria-describedby="v-tooltip-33"
+                    aria-describedby="v-tooltip-31"
                     class="v-chip v-theme--light v-chip--density-default v-chip--size-default v-chip--variant-outlined ma-1"
                     draggable="false"
                     style="color: rgb(54, 60, 66); caret-color: #363c42;"
@@ -36385,7 +36382,7 @@ exports[`Storybook Tests WorkSpace DragAndDrop 1`] = `
                   
                   
                   <span
-                    aria-describedby="v-tooltip-35"
+                    aria-describedby="v-tooltip-33"
                     class="v-chip v-theme--light v-chip--density-default v-chip--size-default v-chip--variant-outlined ma-1"
                     draggable="false"
                     style="color: rgb(54, 60, 66); caret-color: #363c42;"
@@ -36497,7 +36494,7 @@ exports[`Storybook Tests WorkSpace DragAndDrop 1`] = `
                         
                         
                         <i
-                          aria-describedby="v-tooltip-38"
+                          aria-describedby="v-tooltip-36"
                           aria-hidden="false"
                           class="mdi-robot mdi v-icon notranslate v-theme--light v-icon--size-x-small v-icon--clickable v-icon--end icon--hidden"
                           role="button"
@@ -36512,7 +36509,7 @@ exports[`Storybook Tests WorkSpace DragAndDrop 1`] = `
                         
                         
                         <i
-                          aria-describedby="v-tooltip-39"
+                          aria-describedby="v-tooltip-37"
                           aria-hidden="false"
                           class="mdi-lock mdi v-icon notranslate v-theme--light v-icon--size-x-small v-icon--clickable v-icon--end icon--hidden"
                           role="button"
@@ -36548,7 +36545,7 @@ exports[`Storybook Tests WorkSpace DragAndDrop 1`] = `
                   
                   
                   <span
-                    aria-describedby="v-tooltip-40"
+                    aria-describedby="v-tooltip-38"
                     class="v-chip v-theme--light v-chip--density-default v-chip--size-default v-chip--variant-outlined ma-1"
                     draggable="false"
                     style="color: rgb(54, 60, 66); caret-color: #363c42;"
@@ -36584,7 +36581,7 @@ exports[`Storybook Tests WorkSpace DragAndDrop 1`] = `
                   
                   
                   <span
-                    aria-describedby="v-tooltip-42"
+                    aria-describedby="v-tooltip-40"
                     class="v-chip v-theme--light v-chip--density-default v-chip--size-default v-chip--variant-outlined ma-1"
                     draggable="false"
                     style="color: rgb(54, 60, 66); caret-color: #363c42;"
@@ -36620,7 +36617,7 @@ exports[`Storybook Tests WorkSpace DragAndDrop 1`] = `
                   
                   
                   <span
-                    aria-describedby="v-tooltip-44"
+                    aria-describedby="v-tooltip-42"
                     class="v-chip v-theme--light v-chip--density-default v-chip--size-default v-chip--variant-outlined ma-1"
                     draggable="false"
                     style="color: rgb(54, 60, 66); caret-color: #363c42;"
@@ -36737,7 +36734,7 @@ exports[`Storybook Tests WorkSpace DragAndDrop 1`] = `
                         
                         
                         <i
-                          aria-describedby="v-tooltip-48"
+                          aria-describedby="v-tooltip-46"
                           aria-hidden="false"
                           class="mdi-lock mdi v-icon notranslate v-theme--light v-icon--size-x-small v-icon--clickable v-icon--end"
                           role="button"
@@ -36771,7 +36768,7 @@ exports[`Storybook Tests WorkSpace DragAndDrop 1`] = `
                   
                   
                   <span
-                    aria-describedby="v-tooltip-49"
+                    aria-describedby="v-tooltip-47"
                     class="v-chip v-theme--light v-chip--density-default v-chip--size-default v-chip--variant-outlined ma-1"
                     draggable="false"
                     style="color: rgb(54, 60, 66); caret-color: #363c42;"
@@ -36883,7 +36880,7 @@ exports[`Storybook Tests WorkSpace DragAndDrop 1`] = `
                         
                         
                         <i
-                          aria-describedby="v-tooltip-52"
+                          aria-describedby="v-tooltip-50"
                           aria-hidden="false"
                           class="mdi-robot mdi v-icon notranslate v-theme--light v-icon--size-x-small v-icon--clickable v-icon--end icon--hidden"
                           role="button"
@@ -36898,7 +36895,7 @@ exports[`Storybook Tests WorkSpace DragAndDrop 1`] = `
                         
                         
                         <i
-                          aria-describedby="v-tooltip-53"
+                          aria-describedby="v-tooltip-51"
                           aria-hidden="false"
                           class="mdi-lock mdi v-icon notranslate v-theme--light v-icon--size-x-small v-icon--clickable v-icon--end icon--hidden"
                           role="button"
@@ -36934,7 +36931,7 @@ exports[`Storybook Tests WorkSpace DragAndDrop 1`] = `
                   
                   
                   <span
-                    aria-describedby="v-tooltip-54"
+                    aria-describedby="v-tooltip-52"
                     class="v-chip v-theme--light v-chip--density-default v-chip--size-default v-chip--variant-outlined ma-1"
                     draggable="false"
                     style="color: rgb(54, 60, 66); caret-color: #363c42;"
@@ -37046,7 +37043,7 @@ exports[`Storybook Tests WorkSpace DragAndDrop 1`] = `
                         
                         
                         <i
-                          aria-describedby="v-tooltip-57"
+                          aria-describedby="v-tooltip-55"
                           aria-hidden="false"
                           class="mdi-robot mdi v-icon notranslate v-theme--light v-icon--size-x-small v-icon--clickable v-icon--end"
                           role="button"
@@ -37061,7 +37058,7 @@ exports[`Storybook Tests WorkSpace DragAndDrop 1`] = `
                         
                         
                         <i
-                          aria-describedby="v-tooltip-58"
+                          aria-describedby="v-tooltip-56"
                           aria-hidden="false"
                           class="mdi-lock mdi v-icon notranslate v-theme--light v-icon--size-x-small v-icon--clickable v-icon--end icon--hidden"
                           role="button"
@@ -37097,7 +37094,7 @@ exports[`Storybook Tests WorkSpace DragAndDrop 1`] = `
                   
                   
                   <span
-                    aria-describedby="v-tooltip-59"
+                    aria-describedby="v-tooltip-57"
                     class="v-chip v-theme--light v-chip--density-default v-chip--size-default v-chip--variant-outlined ma-1"
                     draggable="false"
                     style="color: rgb(54, 60, 66); caret-color: #363c42;"
@@ -37133,7 +37130,7 @@ exports[`Storybook Tests WorkSpace DragAndDrop 1`] = `
                   
                   
                   <span
-                    aria-describedby="v-tooltip-61"
+                    aria-describedby="v-tooltip-59"
                     class="v-chip v-theme--light v-chip--density-default v-chip--size-default v-chip--variant-outlined ma-1"
                     draggable="false"
                     style="color: rgb(54, 60, 66); caret-color: #363c42;"
@@ -37370,7 +37367,7 @@ exports[`Storybook Tests WorkSpace DragAndDrop 1`] = `
                     <!---->
                     <label
                       class="v-label v-field-label"
-                      for="input-26"
+                      for="input-24"
                     >
                       <!---->
                       
@@ -37381,9 +37378,9 @@ exports[`Storybook Tests WorkSpace DragAndDrop 1`] = `
                     
                     <!---->
                     <input
-                      aria-describedby="input-26-messages"
+                      aria-describedby="input-24-messages"
                       class="v-field__input"
-                      id="input-26"
+                      id="input-24"
                       max="5"
                       min="1"
                       size="1"
@@ -37408,7 +37405,7 @@ exports[`Storybook Tests WorkSpace DragAndDrop 1`] = `
                       <label
                         aria-hidden="true"
                         class="v-label v-field-label v-field-label--floating"
-                        for="input-26"
+                        for="input-24"
                       >
                         <!---->
                         
@@ -37539,13 +37536,10 @@ exports[`Storybook Tests WorkSpace Empty 1`] = `
          Workspace 
       </h3>
       <div>
-        
-        
         <button
           class="v-btn v-btn--disabled v-theme--light v-btn--density-default v-btn--size-small v-btn--variant-outlined mr-2"
           disabled=""
           type="button"
-          v-bind="[object Object]"
         >
           
           <span
@@ -37573,17 +37567,10 @@ exports[`Storybook Tests WorkSpace Empty 1`] = `
           <!---->
           <!---->
         </button>
-        
-        <!--teleport start-->
-        <!--teleport end-->
-        
-        
-        
         <button
           class="v-btn v-btn--disabled v-theme--light v-btn--density-default v-btn--size-small v-btn--variant-outlined"
           disabled=""
           type="button"
-          v-bind="[object Object]"
         >
           
           <span
@@ -37611,14 +37598,10 @@ exports[`Storybook Tests WorkSpace Empty 1`] = `
           <!---->
           <!---->
         </button>
-        
-        <!--teleport start-->
-        <!--teleport end-->
-        
       </div>
     </div>
     <div
-      class="v-row v-row--dense space pa-md-2 ma-md-3 align-center justify-center drag-zone"
+      class="v-row v-row--dense align-center justify-center drag-zone"
     >
       <i
         aria-hidden="true"
diff --git a/ui/tests/unit/workspace.spec.js b/ui/tests/unit/workspace.spec.js
new file mode 100644
index 00000000..1e2584d2
--- /dev/null
+++ b/ui/tests/unit/workspace.spec.js
@@ -0,0 +1,94 @@
+import { shallowMount } from "@vue/test-utils";
+import vuetify from "@/plugins/vuetify";
+import Workspace from "@/components/WorkSpace";
+
+describe("Workspace", () => {
+  test("Updates the list of individuals", async () => {
+    const wrapper = shallowMount(Workspace, {
+      global: {
+        plugins: [vuetify],
+        renderStubDefaultSlot: true
+      },
+      props: {
+        individuals: [
+          {
+            name: "John Smith",
+            uuid: "0010a5211c03c46d340ada434b9f5b5072a8d491",
+            email: "jsmith@example.com",
+            isLocked: false,
+            sources: [{
+              icon: "mdi-slack",
+              name: "slack"
+            }],
+            identities: [{
+              name: "slack",
+              identities: [{
+                source: "slack",
+                email: "jsmith@example.com"
+              }]
+            }]
+          },
+          {
+            name: "J. Smith",
+            uuid: "005b3e8599cc6f64259b7210a5380f113cfd84d7",
+            email: "jsmith@example.com",
+            isLocked: false,
+            sources: [{
+              icon: "mdi-github",
+              name: "github"
+            }],
+            identities: [{
+              name: "github",
+              identities: [{
+                source: "github",
+                email: "jsmith@example.com"
+              }]
+            }
+            ]
+          }
+        ],
+        enroll: () => {},
+        mergeItems: () => {},
+        moveItem: () => {}
+      }
+    });
+
+    expect(wrapper.html()).toContain("John Smith");
+    expect(wrapper.html()).toContain("J. Smith");
+
+    await wrapper.setProps({
+      individuals: [
+        {
+          name: "Jane Doe",
+          uuid: "00327ebd3e7ea358f198a4218b508c55e5dbd488",
+          email: "jdoe@example.com",
+          isLocked: false,
+          sources: [{
+            icon: "mdi-git",
+            name: "git"
+          }],
+          identities: [{
+            name: "git",
+            identities: [{
+              source: "git",
+              email: "jdoe@example.com"
+            }]
+          }
+          ]
+        },
+      ]
+    });
+
+    expect(wrapper.html()).toContain("Jane Doe");
+    expect(wrapper.html()).not.toContain("John Smith");
+    expect(wrapper.html()).not.toContain("J. Smith");
+
+    await wrapper.setProps({
+      individuals: []
+    });
+
+    expect(wrapper.html()).not.toContain("John Smith");
+    expect(wrapper.html()).not.toContain("J. Smith");
+    expect(wrapper.html()).not.toContain("Jane Doe");
+  });
+});