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

Issue:
Add option to open an identity profile from its workspace card
Individual cards pinned on the workspace should allow the user to go the their profile.


Discussion / hints:

Fix patch:
diff --git a/releases/unreleased/link-to-profile-in-individual-cards.yml b/releases/unreleased/link-to-profile-in-individual-cards.yml
new file mode 100644
index 00000000..37958d83
--- /dev/null
+++ b/releases/unreleased/link-to-profile-in-individual-cards.yml
@@ -0,0 +1,8 @@
+---
+title: Link to profile in individual cards
+category: added
+author: Eva Millán <evamillan@bitergia.com>
+issue: 837
+notes: >
+  The name on the individuals cards now links to the
+  member's profile.
diff --git a/ui/src/components/IndividualCard.vue b/ui/src/components/IndividualCard.vue
index addc1ac1..17f8ca43 100644
--- a/ui/src/components/IndividualCard.vue
+++ b/ui/src/components/IndividualCard.vue
@@ -22,7 +22,13 @@
 
       <v-list-item-content>
         <v-list-item-title class="font-weight-medium">
-          {{ name || email }}
+          <router-link
+            :to="{ name: 'Individual', params: { mk: uuid } }"
+            target="_blank"
+            class="link--underline"
+          >
+            <span @click.stop>{{ name || email }}</span>
+          </router-link>
         </v-list-item-title>
         <v-list-item-subtitle v-if="enrollments && enrollments.length > 0">
           {{ enrollments[0].group.name }}


Test patch:
diff --git a/ui/tests/unit/__snapshots__/storybook.spec.js.snap b/ui/tests/unit/__snapshots__/storybook.spec.js.snap
index f03e338e..0f1012e9 100644
--- a/ui/tests/unit/__snapshots__/storybook.spec.js.snap
+++ b/ui/tests/unit/__snapshots__/storybook.spec.js.snap
@@ -3660,9 +3660,15 @@ exports[`Storyshots IndividualCard Closable 1`] = `
           <div
             class="v-list-item__title font-weight-medium"
           >
-            
-        Tom Marvolo Riddle
-      
+            <a
+              class="link--underline"
+              href="/individual/10f546"
+              target="_blank"
+            >
+              <span>
+                Tom Marvolo Riddle
+              </span>
+            </a>
           </div>
            
           <!---->
@@ -3760,9 +3766,15 @@ exports[`Storyshots IndividualCard Default 1`] = `
           <div
             class="v-list-item__title font-weight-medium"
           >
-            
-        Tom Marvolo Riddle
-      
+            <a
+              class="link--underline"
+              href="/individual/10f546"
+              target="_blank"
+            >
+              <span>
+                Tom Marvolo Riddle
+              </span>
+            </a>
           </div>
            
           <!---->
@@ -3847,9 +3859,15 @@ exports[`Storyshots IndividualCard Gravatar 1`] = `
           <div
             class="v-list-item__title font-weight-medium"
           >
-            
-        Santiago Dueñas
-      
+            <a
+              class="link--underline"
+              href="/individual/10f546"
+              target="_blank"
+            >
+              <span>
+                Santiago Dueñas
+              </span>
+            </a>
           </div>
            
           <!---->
@@ -3934,9 +3952,15 @@ exports[`Storyshots IndividualCard Highlighted 1`] = `
           <div
             class="v-list-item__title font-weight-medium"
           >
-            
-        Tom Marvolo Riddle
-      
+            <a
+              class="link--underline"
+              href="/individual/10f546"
+              target="_blank"
+            >
+              <span>
+                Tom Marvolo Riddle
+              </span>
+            </a>
           </div>
            
           <!---->
@@ -4021,9 +4045,15 @@ exports[`Storyshots IndividualCard No Name 1`] = `
           <div
             class="v-list-item__title font-weight-medium"
           >
-            
-        triddle@example.net
-      
+            <a
+              class="link--underline"
+              href="/individual/10f546"
+              target="_blank"
+            >
+              <span>
+                triddle@example.net
+              </span>
+            </a>
           </div>
            
           <!---->
@@ -4108,9 +4138,15 @@ exports[`Storyshots IndividualCard Organization 1`] = `
           <div
             class="v-list-item__title font-weight-medium"
           >
-            
-        Tom Marvolo Riddle
-      
+            <a
+              class="link--underline"
+              href="/individual/10f546"
+              target="_blank"
+            >
+              <span>
+                Tom Marvolo Riddle
+              </span>
+            </a>
           </div>
            
           <div
@@ -4205,9 +4241,15 @@ exports[`Storyshots IndividualCard Selectable 1`] = `
           <div
             class="v-list-item__title font-weight-medium"
           >
-            
-        Tom Marvolo Riddle
-      
+            <a
+              class="link--underline"
+              href="/individual/10f546"
+              target="_blank"
+            >
+              <span>
+                Tom Marvolo Riddle
+              </span>
+            </a>
           </div>
            
           <!---->
@@ -4292,9 +4334,15 @@ exports[`Storyshots IndividualCard Selected 1`] = `
           <div
             class="v-list-item__title font-weight-medium"
           >
-            
-        Tom Marvolo Riddle
-      
+            <a
+              class="link--underline"
+              href="/individual/10f546"
+              target="_blank"
+            >
+              <span>
+                Tom Marvolo Riddle
+              </span>
+            </a>
           </div>
            
           <!---->
@@ -4379,9 +4427,15 @@ exports[`Storyshots IndividualCard Single Initial 1`] = `
           <div
             class="v-list-item__title font-weight-medium"
           >
-            
-        Voldemort
-      
+            <a
+              class="link--underline"
+              href="/individual/10f546"
+              target="_blank"
+            >
+              <span>
+                Voldemort
+              </span>
+            </a>
           </div>
            
           <!---->
@@ -4466,9 +4520,15 @@ exports[`Storyshots IndividualCard Sources 1`] = `
           <div
             class="v-list-item__title font-weight-medium"
           >
-            
-        Tom Marvolo Riddle
-      
+            <a
+              class="link--underline"
+              href="/individual/10f546"
+              target="_blank"
+            >
+              <span>
+                Tom Marvolo Riddle
+              </span>
+            </a>
           </div>
            
           <!---->
@@ -4594,9 +4654,15 @@ exports[`Storyshots IndividualCard Sources And Organization 1`] = `
           <div
             class="v-list-item__title font-weight-medium"
           >
-            
-        Tom Marvolo Riddle
-      
+            <a
+              class="link--underline"
+              href="/individual/10f546"
+              target="_blank"
+            >
+              <span>
+                Tom Marvolo Riddle
+              </span>
+            </a>
           </div>
            
           <div
@@ -6494,9 +6560,15 @@ exports[`Storyshots IndividualsGrid Default 1`] = `
                   <div
                     class="v-list-item__title font-weight-medium"
                   >
-                    
-        Tom Marvolo Riddle
-      
+                    <a
+                      class="link--underline"
+                      href="/individual/10f546"
+                      target="_blank"
+                    >
+                      <span>
+                        Tom Marvolo Riddle
+                      </span>
+                    </a>
                   </div>
                    
                   <!---->
@@ -6583,9 +6655,15 @@ exports[`Storyshots IndividualsGrid Default 1`] = `
                   <div
                     class="v-list-item__title font-weight-medium"
                   >
-                    
-        Harry Potter
-      
+                    <a
+                      class="link--underline"
+                      href="/individual/10f546"
+                      target="_blank"
+                    >
+                      <span>
+                        Harry Potter
+                      </span>
+                    </a>
                   </div>
                    
                   <!---->
@@ -6688,9 +6766,15 @@ exports[`Storyshots IndividualsGrid Default 1`] = `
                   <div
                     class="v-list-item__title font-weight-medium"
                   >
-                    
-        Voldemort
-      
+                    <a
+                      class="link--underline"
+                      href="/individual/10f546"
+                      target="_blank"
+                    >
+                      <span>
+                        Voldemort
+                      </span>
+                    </a>
                   </div>
                    
                   <!---->
@@ -6773,9 +6857,15 @@ exports[`Storyshots IndividualsGrid Default 1`] = `
                   <div
                     class="v-list-item__title font-weight-medium"
                   >
-                    
-        Hermione Granger
-      
+                    <a
+                      class="link--underline"
+                      href="/individual/10f546"
+                      target="_blank"
+                    >
+                      <span>
+                        Hermione Granger
+                      </span>
+                    </a>
                   </div>
                    
                   <!---->
@@ -6878,9 +6968,15 @@ exports[`Storyshots IndividualsGrid Default 1`] = `
                   <div
                     class="v-list-item__title font-weight-medium"
                   >
-                    
-        Ambus Dumbledore
-      
+                    <a
+                      class="link--underline"
+                      href="/individual/10f546"
+                      target="_blank"
+                    >
+                      <span>
+                        Ambus Dumbledore
+                      </span>
+                    </a>
                   </div>
                    
                   <!---->
@@ -6973,9 +7069,15 @@ exports[`Storyshots IndividualsGrid Default 1`] = `
                   <div
                     class="v-list-item__title font-weight-medium"
                   >
-                    
-        Ron Weasley
-      
+                    <a
+                      class="link--underline"
+                      href="/individual/10f546"
+                      target="_blank"
+                    >
+                      <span>
+                        Ron Weasley
+                      </span>
+                    </a>
                   </div>
                    
                   <!---->
@@ -7078,9 +7180,15 @@ exports[`Storyshots IndividualsGrid Default 1`] = `
                   <div
                     class="v-list-item__title font-weight-medium"
                   >
-                    
-        Severus Snape
-      
+                    <a
+                      class="link--underline"
+                      href="/individual/10f546"
+                      target="_blank"
+                    >
+                      <span>
+                        Severus Snape
+                      </span>
+                    </a>
                   </div>
                    
                   <!---->
@@ -7183,9 +7291,15 @@ exports[`Storyshots IndividualsGrid Default 1`] = `
                   <div
                     class="v-list-item__title font-weight-medium"
                   >
-                    
-        Hagrid
-      
+                    <a
+                      class="link--underline"
+                      href="/individual/10f546"
+                      target="_blank"
+                    >
+                      <span>
+                        Hagrid
+                      </span>
+                    </a>
                   </div>
                    
                   <!---->
@@ -7380,7 +7494,7 @@ exports[`Storyshots IndividualsTable Default 1`] = `
                 />
                 <input
                   aria-checked="false"
-                  id="input-958"
+                  id="input-977"
                   role="checkbox"
                   type="checkbox"
                   value=""
@@ -7391,7 +7505,7 @@ exports[`Storyshots IndividualsTable Default 1`] = `
               </div>
               <label
                 class="v-label theme--light"
-                for="input-958"
+                for="input-977"
                 style="left: 0px; position: relative;"
               >
                 Select all
@@ -7479,13 +7593,13 @@ exports[`Storyshots IndividualsTable Default 1`] = `
                 >
                   <label
                     class="v-label theme--light"
-                    for="input-963"
+                    for="input-982"
                     style="left: 0px; position: absolute;"
                   >
                     Search
                   </label>
                   <input
-                    id="input-963"
+                    id="input-982"
                     type="text"
                   />
                 </div>
@@ -7548,7 +7662,7 @@ exports[`Storyshots IndividualsTable Default 1`] = `
               <div
                 aria-expanded="false"
                 aria-haspopup="listbox"
-                aria-owns="list-970"
+                aria-owns="list-989"
                 class="v-input__slot"
                 role="button"
               >
@@ -7568,7 +7682,7 @@ exports[`Storyshots IndividualsTable Default 1`] = `
                 >
                   <label
                     class="v-label theme--light"
-                    for="input-970"
+                    for="input-989"
                     style="left: 0px; position: absolute;"
                   >
                     Order by
@@ -7579,7 +7693,7 @@ exports[`Storyshots IndividualsTable Default 1`] = `
                     <input
                       aria-readonly="false"
                       autocomplete="off"
-                      id="input-970"
+                      id="input-989"
                       readonly="readonly"
                       type="text"
                     />
@@ -7806,13 +7920,13 @@ exports[`Storyshots IndividualsTable Default 1`] = `
                 >
                   <label
                     class="v-label v-label--active theme--light"
-                    for="input-992"
+                    for="input-1011"
                     style="left: 0px; position: absolute;"
                   >
                     Items per page
                   </label>
                   <input
-                    id="input-992"
+                    id="input-1011"
                     max="0"
                     min="1"
                     type="number"
@@ -7977,7 +8091,7 @@ exports[`Storyshots IndividualsTable Expandable 1`] = `
                 />
                 <input
                   aria-checked="false"
-                  id="input-1098"
+                  id="input-1117"
                   role="checkbox"
                   type="checkbox"
                   value=""
@@ -7988,7 +8102,7 @@ exports[`Storyshots IndividualsTable Expandable 1`] = `
               </div>
               <label
                 class="v-label theme--light"
-                for="input-1098"
+                for="input-1117"
                 style="left: 0px; position: relative;"
               >
                 Select all
@@ -8076,13 +8190,13 @@ exports[`Storyshots IndividualsTable Expandable 1`] = `
                 >
                   <label
                     class="v-label theme--light"
-                    for="input-1103"
+                    for="input-1122"
                     style="left: 0px; position: absolute;"
                   >
                     Search
                   </label>
                   <input
-                    id="input-1103"
+                    id="input-1122"
                     type="text"
                   />
                 </div>
@@ -8145,7 +8259,7 @@ exports[`Storyshots IndividualsTable Expandable 1`] = `
               <div
                 aria-expanded="false"
                 aria-haspopup="listbox"
-                aria-owns="list-1110"
+                aria-owns="list-1129"
                 class="v-input__slot"
                 role="button"
               >
@@ -8165,7 +8279,7 @@ exports[`Storyshots IndividualsTable Expandable 1`] = `
                 >
                   <label
                     class="v-label theme--light"
-                    for="input-1110"
+                    for="input-1129"
                     style="left: 0px; position: absolute;"
                   >
                     Order by
@@ -8176,7 +8290,7 @@ exports[`Storyshots IndividualsTable Expandable 1`] = `
                     <input
                       aria-readonly="false"
                       autocomplete="off"
-                      id="input-1110"
+                      id="input-1129"
                       readonly="readonly"
                       type="text"
                     />
@@ -8403,13 +8517,13 @@ exports[`Storyshots IndividualsTable Expandable 1`] = `
                 >
                   <label
                     class="v-label v-label--active theme--light"
-                    for="input-1132"
+                    for="input-1151"
                     style="left: 0px; position: absolute;"
                   >
                     Items per page
                   </label>
                   <input
-                    id="input-1132"
+                    id="input-1151"
                     max="0"
                     min="1"
                     type="number"
@@ -8507,7 +8621,7 @@ exports[`Storyshots IndividualsTable Hidden Header 1`] = `
                 />
                 <input
                   aria-checked="false"
-                  id="input-1266"
+                  id="input-1285"
                   role="checkbox"
                   type="checkbox"
                   value=""
@@ -8518,7 +8632,7 @@ exports[`Storyshots IndividualsTable Hidden Header 1`] = `
               </div>
               <label
                 class="v-label theme--light"
-                for="input-1266"
+                for="input-1285"
                 style="left: 0px; position: relative;"
               >
                 Select all
@@ -8606,13 +8720,13 @@ exports[`Storyshots IndividualsTable Hidden Header 1`] = `
                 >
                   <label
                     class="v-label theme--light"
-                    for="input-1271"
+                    for="input-1290"
                     style="left: 0px; position: absolute;"
                   >
                     Search
                   </label>
                   <input
-                    id="input-1271"
+                    id="input-1290"
                     type="text"
                   />
                 </div>
@@ -8675,7 +8789,7 @@ exports[`Storyshots IndividualsTable Hidden Header 1`] = `
               <div
                 aria-expanded="false"
                 aria-haspopup="listbox"
-                aria-owns="list-1278"
+                aria-owns="list-1297"
                 class="v-input__slot"
                 role="button"
               >
@@ -8695,7 +8809,7 @@ exports[`Storyshots IndividualsTable Hidden Header 1`] = `
                 >
                   <label
                     class="v-label theme--light"
-                    for="input-1278"
+                    for="input-1297"
                     style="left: 0px; position: absolute;"
                   >
                     Order by
@@ -8706,7 +8820,7 @@ exports[`Storyshots IndividualsTable Hidden Header 1`] = `
                     <input
                       aria-readonly="false"
                       autocomplete="off"
-                      id="input-1278"
+                      id="input-1297"
                       readonly="readonly"
                       type="text"
                     />
@@ -8933,13 +9047,13 @@ exports[`Storyshots IndividualsTable Hidden Header 1`] = `
                 >
                   <label
                     class="v-label v-label--active theme--light"
-                    for="input-1300"
+                    for="input-1319"
                     style="left: 0px; position: absolute;"
                   >
                     Items per page
                   </label>
                   <input
-                    id="input-1300"
+                    id="input-1319"
                     max="0"
                     min="1"
                     type="number"
@@ -9104,7 +9218,7 @@ exports[`Storyshots IndividualsTable Outlined 1`] = `
                 />
                 <input
                   aria-checked="false"
-                  id="input-1406"
+                  id="input-1425"
                   role="checkbox"
                   type="checkbox"
                   value=""
@@ -9115,7 +9229,7 @@ exports[`Storyshots IndividualsTable Outlined 1`] = `
               </div>
               <label
                 class="v-label theme--light"
-                for="input-1406"
+                for="input-1425"
                 style="left: 0px; position: relative;"
               >
                 Select all
@@ -9203,13 +9317,13 @@ exports[`Storyshots IndividualsTable Outlined 1`] = `
                 >
                   <label
                     class="v-label theme--light"
-                    for="input-1411"
+                    for="input-1430"
                     style="left: 0px; position: absolute;"
                   >
                     Search
                   </label>
                   <input
-                    id="input-1411"
+                    id="input-1430"
                     type="text"
                   />
                 </div>
@@ -9272,7 +9386,7 @@ exports[`Storyshots IndividualsTable Outlined 1`] = `
               <div
                 aria-expanded="false"
                 aria-haspopup="listbox"
-                aria-owns="list-1418"
+                aria-owns="list-1437"
                 class="v-input__slot"
                 role="button"
               >
@@ -9292,7 +9406,7 @@ exports[`Storyshots IndividualsTable Outlined 1`] = `
                 >
                   <label
                     class="v-label theme--light"
-                    for="input-1418"
+                    for="input-1437"
                     style="left: 0px; position: absolute;"
                   >
                     Order by
@@ -9303,7 +9417,7 @@ exports[`Storyshots IndividualsTable Outlined 1`] = `
                     <input
                       aria-readonly="false"
                       autocomplete="off"
-                      id="input-1418"
+                      id="input-1437"
                       readonly="readonly"
                       type="text"
                     />
@@ -9530,13 +9644,13 @@ exports[`Storyshots IndividualsTable Outlined 1`] = `
                 >
                   <label
                     class="v-label v-label--active theme--light"
-                    for="input-1440"
+                    for="input-1459"
                     style="left: 0px; position: absolute;"
                   >
                     Items per page
                   </label>
                   <input
-                    id="input-1440"
+                    id="input-1459"
                     max="0"
                     min="1"
                     type="number"
@@ -10155,7 +10269,7 @@ exports[`Storyshots OrganizationSelector Default 1`] = `
           <div
             aria-expanded="false"
             aria-haspopup="listbox"
-            aria-owns="list-1645"
+            aria-owns="list-1664"
             class="v-input__slot"
             role="combobox"
           >
@@ -10177,14 +10291,14 @@ exports[`Storyshots OrganizationSelector Default 1`] = `
             >
               <label
                 class="v-label theme--light"
-                for="input-1645"
+                for="input-1664"
                 style="left: 0px; position: absolute;"
               >
                 Organization
               </label>
               <input
                 autocomplete="off"
-                id="input-1645"
+                id="input-1664"
                 type="text"
               />
               <div
@@ -10253,7 +10367,7 @@ exports[`Storyshots OrganizationSelector Selected Organization 1`] = `
           <div
             aria-expanded="false"
             aria-haspopup="listbox"
-            aria-owns="list-1655"
+            aria-owns="list-1674"
             class="v-input__slot"
             role="combobox"
           >
@@ -10275,14 +10389,14 @@ exports[`Storyshots OrganizationSelector Selected Organization 1`] = `
             >
               <label
                 class="v-label v-label--active theme--light"
-                for="input-1655"
+                for="input-1674"
                 style="left: 0px; position: absolute;"
               >
                 Organization
               </label>
               <input
                 autocomplete="off"
-                id="input-1655"
+                id="input-1674"
                 type="text"
               />
               <div
@@ -10449,13 +10563,13 @@ exports[`Storyshots OrganizationsTable Groups 1`] = `
                 >
                   <label
                     class="v-label theme--light"
-                    for="input-1673"
+                    for="input-1692"
                     style="left: 0px; position: absolute;"
                   >
                     Search
                   </label>
                   <input
-                    id="input-1673"
+                    id="input-1692"
                     type="text"
                   />
                 </div>
@@ -10615,13 +10729,13 @@ exports[`Storyshots OrganizationsTable Groups 1`] = `
               >
                 <label
                   class="v-label v-label--active theme--light"
-                  for="input-1685"
+                  for="input-1704"
                   style="left: 0px; position: absolute;"
                 >
                   Items per page
                 </label>
                 <input
-                  id="input-1685"
+                  id="input-1704"
                   max="0"
                   min="1"
                   type="number"
@@ -10740,13 +10854,13 @@ exports[`Storyshots OrganizationsTable Organizations 1`] = `
                 >
                   <label
                     class="v-label theme--light"
-                    for="input-1726"
+                    for="input-1745"
                     style="left: 0px; position: absolute;"
                   >
                     Search
                   </label>
                   <input
-                    id="input-1726"
+                    id="input-1745"
                     type="text"
                   />
                 </div>
@@ -10906,13 +11020,13 @@ exports[`Storyshots OrganizationsTable Organizations 1`] = `
               >
                 <label
                   class="v-label v-label--active theme--light"
-                  for="input-1738"
+                  for="input-1757"
                   style="left: 0px; position: absolute;"
                 >
                   Items per page
                 </label>
                 <input
-                  id="input-1738"
+                  id="input-1757"
                   max="0"
                   min="1"
                   type="number"
@@ -10976,9 +11090,15 @@ exports[`Storyshots ProfileCard Default 1`] = `
           <div
             class="v-list-item__title font-weight-medium"
           >
-            
-        Tom Marvolo Riddle
-      
+            <a
+              class="link--underline"
+              href="/individual/006afa"
+              target="_blank"
+            >
+              <span>
+                Tom Marvolo Riddle
+              </span>
+            </a>
           </div>
            
           <!---->
@@ -11280,13 +11400,13 @@ exports[`Storyshots Search Default 1`] = `
               >
                 <label
                   class="v-label theme--light"
-                  for="input-1828"
+                  for="input-1848"
                   style="left: 0px; position: absolute;"
                 >
                   Search
                 </label>
                 <input
-                  id="input-1828"
+                  id="input-1848"
                   type="text"
                 />
               </div>
@@ -11407,13 +11527,13 @@ exports[`Storyshots Search Filter Selector 1`] = `
               >
                 <label
                   class="v-label theme--light"
-                  for="input-1837"
+                  for="input-1857"
                   style="left: 0px; position: absolute;"
                 >
                   Search
                 </label>
                 <input
-                  id="input-1837"
+                  id="input-1857"
                   type="text"
                 />
               </div>
@@ -11504,13 +11624,13 @@ exports[`Storyshots Search Order Selector 1`] = `
               >
                 <label
                   class="v-label theme--light"
-                  for="input-1849"
+                  for="input-1869"
                   style="left: 0px; position: absolute;"
                 >
                   Search
                 </label>
                 <input
-                  id="input-1849"
+                  id="input-1869"
                   type="text"
                 />
               </div>
@@ -11573,7 +11693,7 @@ exports[`Storyshots Search Order Selector 1`] = `
             <div
               aria-expanded="false"
               aria-haspopup="listbox"
-              aria-owns="list-1853"
+              aria-owns="list-1873"
               class="v-input__slot"
               role="button"
             >
@@ -11593,7 +11713,7 @@ exports[`Storyshots Search Order Selector 1`] = `
               >
                 <label
                   class="v-label theme--light"
-                  for="input-1853"
+                  for="input-1873"
                   style="left: 0px; position: absolute;"
                 >
                   Order by
@@ -11604,7 +11724,7 @@ exports[`Storyshots Search Order Selector 1`] = `
                   <input
                     aria-readonly="false"
                     autocomplete="off"
-                    id="input-1853"
+                    id="input-1873"
                     readonly="readonly"
                     type="text"
                   />
@@ -12071,9 +12191,15 @@ exports[`Storyshots WorkSpace Default 1`] = `
                 <div
                   class="v-list-item__title font-weight-medium"
                 >
-                  
-        Tom Marvolo Riddle
-      
+                  <a
+                    class="link--underline"
+                    href="/individual/164e41c60c23"
+                    target="_blank"
+                  >
+                    <span>
+                      Tom Marvolo Riddle
+                    </span>
+                  </a>
                 </div>
                  
                 <div
@@ -12199,9 +12325,15 @@ exports[`Storyshots WorkSpace Default 1`] = `
                 <div
                   class="v-list-item__title font-weight-medium"
                 >
-                  
-        Harry Potter
-      
+                  <a
+                    class="link--underline"
+                    href="/individual/164e41c60c28"
+                    target="_blank"
+                  >
+                    <span>
+                      Harry Potter
+                    </span>
+                  </a>
                 </div>
                  
                 <div
@@ -12528,7 +12660,7 @@ exports[`Storyshots WorkSpace Drag And Drop 1`] = `
                   />
                   <input
                     aria-checked="false"
-                    id="input-1997"
+                    id="input-2019"
                     role="checkbox"
                     type="checkbox"
                     value=""
@@ -12539,7 +12671,7 @@ exports[`Storyshots WorkSpace Drag And Drop 1`] = `
                 </div>
                 <label
                   class="v-label theme--light"
-                  for="input-1997"
+                  for="input-2019"
                   style="left: 0px; position: relative;"
                 >
                   Select all
@@ -12627,13 +12759,13 @@ exports[`Storyshots WorkSpace Drag And Drop 1`] = `
                   >
                     <label
                       class="v-label theme--light"
-                      for="input-2002"
+                      for="input-2024"
                       style="left: 0px; position: absolute;"
                     >
                       Search
                     </label>
                     <input
-                      id="input-2002"
+                      id="input-2024"
                       type="text"
                     />
                   </div>
@@ -12696,7 +12828,7 @@ exports[`Storyshots WorkSpace Drag And Drop 1`] = `
                 <div
                   aria-expanded="false"
                   aria-haspopup="listbox"
-                  aria-owns="list-2009"
+                  aria-owns="list-2031"
                   class="v-input__slot"
                   role="button"
                 >
@@ -12716,7 +12848,7 @@ exports[`Storyshots WorkSpace Drag And Drop 1`] = `
                   >
                     <label
                       class="v-label theme--light"
-                      for="input-2009"
+                      for="input-2031"
                       style="left: 0px; position: absolute;"
                     >
                       Order by
@@ -12727,7 +12859,7 @@ exports[`Storyshots WorkSpace Drag And Drop 1`] = `
                       <input
                         aria-readonly="false"
                         autocomplete="off"
-                        id="input-2009"
+                        id="input-2031"
                         readonly="readonly"
                         type="text"
                       />
@@ -12954,13 +13086,13 @@ exports[`Storyshots WorkSpace Drag And Drop 1`] = `
                   >
                     <label
                       class="v-label v-label--active theme--light"
-                      for="input-2031"
+                      for="input-2053"
                       style="left: 0px; position: absolute;"
                     >
                       Items per page
                     </label>
                     <input
-                      id="input-2031"
+                      id="input-2053"
                       max="0"
                       min="1"
                       type="number"