Add title attribute to all object names in new tables [SCI-10203]

app/javascript/vue/experiments/renderers/name.vue

@@ -6,7 +6,10 @@
       </div>
       <img v-else :src="workflow_img" class="max-h-9 max-w-[36px]">
     </div>
-    <a :href="params.data.urls.show" class="hover:no-underline truncate">{{ params.data.name  }}</a>
+    <a :href="params.data.urls.show" class="hover:no-underline truncate"
+        :title="params.data.name">
+      {{ params.data.name  }}
+    </a>
   </div>
 </template>
 

app/javascript/vue/label_template/table.vue

@@ -82,6 +82,7 @@ export default {
           field: 'modified_by',
           headerName: this.i18n.t('label_templates.index.updated_by'),
           sortable: true,
+          cellRenderer: ({ data: { modified_by: modifiedBy } }) => `<span title="${modifiedBy}">${modifiedBy}</span>`
         }, {
           field: 'updated_at',
           headerName: this.i18n.t('label_templates.index.updated_at'),
@@ -90,6 +91,7 @@ export default {
           field: 'created_by',
           headerName: this.i18n.t('label_templates.index.created_by'),
           sortable: true,
+          cellRenderer: ({ data: { created_by: createdBy } }) => `<span title="${createdBy}">${createdBy}</span>`
         }, {
           field: 'created_at',
           headerName: this.i18n.t('label_templates.index.created_at'),
@@ -130,7 +132,7 @@ export default {
   methods: {
     labelNameRenderer(params) {
       const editUrl = params.data.urls.show;
-      return `<a href="${editUrl}">
+      return `<a href="${editUrl}" title="${params.data.name}">
                 ${params.data.icon_url}
                 ${params.data.name}
               </a>`;

app/javascript/vue/projects/list.vue

@@ -252,7 +252,8 @@ export default {
       const showUrl = params.data.urls.show;
       return `<a href="${showUrl}"
                  class="flex items-center gap-1 hover:no-underline
-                        ${!showUrl ? 'pointer-events-none text-sn-grey' : ''}">
+                        ${!showUrl ? 'pointer-events-none text-sn-grey' : ''}"
+                 title="${params.data.name}">
                 ${params.data.folder ? '<i class="sn-icon mini sn-icon-mini-folder-left"></i>' : ''}
                 ${params.data.name}
               </a>`;

app/javascript/vue/protocols/table.vue

@@ -154,7 +154,8 @@ export default {
       {
         field: 'published_by',
         headerName: this.i18n.t('protocols.index.thead.published_by'),
-        sortable: true
+        sortable: true,
+        cellRenderer: ({ data: { published_by: publishedBy } }) => `<span title="${publishedBy || ''}">${publishedBy || ''}</span>`
       },
       {
         field: 'published_on',
@@ -171,7 +172,8 @@ export default {
         columns.push({
           field: 'archived_by',
           headerName: this.i18n.t('protocols.index.thead.archived_by'),
-          sortable: true
+          sortable: true,
+          cellRenderer: ({ data: { archived_by: archivedBy } }) => `<span title="${archivedBy || ''}">${archivedBy || ''}</span>`
         });
         columns.push({
           field: 'archived_on',
@@ -335,9 +337,9 @@ export default {
     nameRenderer(params) {
       const { urls, name } = params.data;
       if (urls.show) {
-        return `<a href="${urls.show}">${name}</a>`;
+        return `<a href="${urls.show}" title="${name}">${name}</a>`;
       }
-      return `<span class="text-sn-grey">${name}</span>`;
+      return `<span class="text-sn-grey" title="${name}">${name}</span>`;
     },
     usersFilterRenderer(option) {
       return `<div class="flex items-center gap-2">

app/javascript/vue/reports/table.vue

@@ -83,11 +83,13 @@ export default {
         {
           field: 'project_name',
           headerName: this.i18n.t('projects.reports.index.thead_project_name'),
-          sortable: true
+          sortable: true,
+          cellRenderer: ({ data: { project_name: projectName } }) => `<span title="${projectName}">${projectName}</span>`
         }, {
           field: 'name',
           headerName: this.i18n.t('projects.reports.index.thead_name'),
-          sortable: true
+          sortable: true,
+          cellRenderer: ({ data: { name } }) => `<span title="${name}">${name}</span>`
         }, {
           field: 'code',
           headerName: this.i18n.t('projects.reports.index.thead_id'),
@@ -105,11 +107,13 @@ export default {
         }, {
           field: 'created_by_name',
           headerName: this.i18n.t('projects.reports.index.thead_created_by'),
-          sortable: true
+          sortable: true,
+          cellRenderer: ({ data: { created_by_name: createdByName } }) => `<span title="${createdByName}">${createdByName}</span>`
         }, {
           field: 'modified_by_name',
           headerName: this.i18n.t('projects.reports.index.thead_last_modified_by'),
-          sortable: true
+          sortable: true,
+          cellRenderer: ({ data: { modified_by_name: modifiedByName } }) => `<span title="${modifiedByName}">${modifiedByName}</span>`
         }, {
           field: 'created_at',
           headerName: this.i18n.t('projects.reports.index.thead_created_at'),

app/javascript/vue/repositories/table.vue

@@ -145,7 +145,8 @@ export default {
       {
         field: 'team',
         headerName: this.i18n.t('libraries.index.table.ownership'),
-        sortable: true
+        sortable: true,
+        cellRenderer: ({ data: { team } }) => `<span title="${team}">${team}</span>`
       },
       {
         field: 'created_at',
@@ -155,7 +156,8 @@ export default {
       {
         field: 'created_by',
         headerName: this.i18n.t('libraries.index.table.added_by'),
-        sortable: true
+        sortable: true,
+        cellRenderer: ({ data: { created_by: createdBy } }) => `<span title="${createdBy}">${createdBy}</span>`
       }];
 
       if (this.currentViewMode === 'archived') {
@@ -167,7 +169,8 @@ export default {
         columns.push({
           field: 'archived_by',
           headerName: this.i18n.t('libraries.index.table.archived_by'),
-          sortable: true
+          sortable: true,
+          cellRenderer: ({ data: { archived_by: archivedBy } }) => `<span title="${archivedBy}">${archivedBy}</span>`
         });
       }
 
@@ -297,7 +300,8 @@ export default {
       if (shared || ishared) {
         sharedIcon = '<i class="fas fa-users"></i>';
       }
-      return `<a class="hover:no-underline flex items-center gap-1" href="${urls.show}">${sharedIcon}${name}</a>`;
+      return `<a class="hover:no-underline flex items-center gap-1"
+                 title="${name}" href="${urls.show}">${sharedIcon}${name}</a>`;
     }
   }
 };