From 18f9d43a80192076b9af89ff2dedfc4f808a9d01 Mon Sep 17 00:00:00 2001
From: wandji <wbertrand10@gmail.com>
Date: Thu, 19 Oct 2023 10:23:36 +0100
Subject: [PATCH] Fix issue with long column names in item card [SCI-9546]
 (#6488)

---
 .../repository_item_sidebar/RepositoryItemSidebar.vue  | 10 +++++++---
 .../repository_values/RepositoryAssetValue.vue         |  6 +++---
 .../repository_values/RepositoryChecklistValue.vue     |  2 +-
 .../repository_values/RepositoryDateRangeValue.vue     |  2 +-
 .../repository_values/RepositoryDateTimeRangeValue.vue |  2 +-
 .../repository_values/RepositoryDateTimeValue.vue      |  2 +-
 .../repository_values/RepositoryDateValue.vue          |  2 +-
 .../repository_values/RepositoryListValue.vue          |  2 +-
 .../repository_values/RepositoryNumberValue.vue        |  2 +-
 .../repository_values/RepositoryStatusValue.vue        |  2 +-
 .../repository_values/RepositoryStockValue.vue         |  2 +-
 .../repository_values/RepositoryTextValue.vue          |  2 +-
 .../repository_values/RepositoryTimeRangeValue.vue     |  2 +-
 .../repository_values/RepositoryTimeValue.vue          |  2 +-
 14 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/app/javascript/vue/repository_item_sidebar/RepositoryItemSidebar.vue b/app/javascript/vue/repository_item_sidebar/RepositoryItemSidebar.vue
index 48705b4af..06046a7ee 100644
--- a/app/javascript/vue/repository_item_sidebar/RepositoryItemSidebar.vue
+++ b/app/javascript/vue/repository_item_sidebar/RepositoryItemSidebar.vue
@@ -7,9 +7,8 @@
 
       <div id="sticky-header-wrapper" class="sticky top-0 right-0 bg-white flex z-50 flex-col h-[78px] pt-6">
         <div class="header flex w-full h-[30px] pr-6">
-          <h4 class="item-name my-auto truncate text-xl" :title="defaultColumns?.name">
-            {{ defaultColumns?.archived ? i18n.t('labels.archived') : '' }}
-            {{ defaultColumns?.name }}
+          <h4 class="item-name my-auto truncate text-xl" :title="repositoryRowName">
+            {{ repositoryRowName }}
           </h4>
           <i id="close-icon" @click="toggleShowHideSidebar(currentItemUrl)"
             class="sn-icon sn-icon-close ml-auto cursor-pointer my-auto mx-0"></i>
@@ -286,6 +285,11 @@ export default {
   created() {
     window.repositoryItemSidebarComponent = this;
   },
+  computed: {
+    repositoryRowName() {
+      return this.defaultColumns?.archived ? `${I18n.t('labels.archived')} ${this.defaultColumns?.name}` : this.defaultColumns?.name;
+    }
+  },
   mounted() {
     // Add a click event listener to the document
     document.addEventListener('click', this.handleOutsideClick);
diff --git a/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryAssetValue.vue b/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryAssetValue.vue
index 2f02fc6fe..93423da35 100644
--- a/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryAssetValue.vue
+++ b/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryAssetValue.vue
@@ -1,11 +1,11 @@
 <template>
   <div id="repository-asset-value-wrapper" class="flex flex-col min-min-h-[46px] h-auto gap-[6px]">
-    <div class="font-inter text-sm font-semibold leading-5">
+    <div class="font-inter text-sm font-semibold leading-5 truncate">
       {{ colName }}
     </div>
     <div v-if="file_name" @mouseover="tooltipShowing = true" @mouseout="tooltipShowing = false"
-      class="w-fit cursor-pointer text-sn-science-blue relative">
-      <a class="file-preview-link" :id="modalPreviewLinkId" data-no-turbolink="true"
+      class="w-full cursor-pointer text-sn-science-blue relative">
+      <a class="w-full inline-block file-preview-link truncate" :id="modalPreviewLinkId" data-no-turbolink="true"
         data-id="true" data-status="asset-present" :data-preview-url=this?.preview_url :href=this?.url>
         {{ file_name }}
       </a>
diff --git a/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryChecklistValue.vue b/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryChecklistValue.vue
index ce66304df..21baac0d3 100644
--- a/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryChecklistValue.vue
+++ b/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryChecklistValue.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="repository-checklist-value-wrapper" class="flex flex-col min-min-h-[46px] h-auto gap-[6px]">
-    <div class="font-inter text-sm font-semibold leading-5">
+    <div class="font-inter text-sm font-semibold leading-5 truncate">
       {{ colName }}
     </div>
     <div v-if="allChecklistItems.length > 0">
diff --git a/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryDateRangeValue.vue b/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryDateRangeValue.vue
index 07828dc96..21e15289b 100644
--- a/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryDateRangeValue.vue
+++ b/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryDateRangeValue.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="repository-date-range-value-wrapper" class="flex flex-col min-min-h-[46px] h-auto gap-[6px]">
-    <div class="font-inter text-sm font-semibold leading-5">
+    <div class="font-inter text-sm font-semibold leading-5 truncate">
       {{ colName }}
     </div>
     <div v-if="start_time?.formatted && end_time?.formatted"
diff --git a/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryDateTimeRangeValue.vue b/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryDateTimeRangeValue.vue
index da2197ce4..73836fd89 100644
--- a/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryDateTimeRangeValue.vue
+++ b/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryDateTimeRangeValue.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="repository-date-time-range-value-wrapper" class="flex flex-col min-min-h-[46px] h-auto gap-[6px]">
-    <div class="font-inter text-sm font-semibold leading-5">
+    <div class="font-inter text-sm font-semibold leading-5 truncate">
       {{ colName }}
     </div>
     <div v-if="start_time?.formatted && end_time?.formatted"
diff --git a/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryDateTimeValue.vue b/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryDateTimeValue.vue
index ef2f2e50f..de9e0f4e1 100644
--- a/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryDateTimeValue.vue
+++ b/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryDateTimeValue.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="repository-date-time-value-wrapper" class="flex flex-col min-min-h-[46px] h-auto gap-[6px]">
-    <div class="font-inter text-sm font-semibold leading-5">
+    <div class="font-inter text-sm font-semibold leading-5 truncate">
       {{ colName }}
     </div>
     <div v-if="formatted" class="text-sn-dark-grey font-inter text-sm font-normal leading-5 flex">
diff --git a/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryDateValue.vue b/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryDateValue.vue
index bdfc53b1a..8f70d82dd 100644
--- a/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryDateValue.vue
+++ b/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryDateValue.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="repository-date-value-wrapper" class="flex flex-col min-min-h-[46px] h-auto gap-[6px]">
-    <div class="font-inter text-sm font-semibold leading-5">
+    <div class="font-inter text-sm font-semibold leading-5 truncate">
       {{ colName }}
     </div>
     <div v-if="formatted" class="text-sn-dark-grey font-inter text-sm font-normal leading-5 flex">
diff --git a/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryListValue.vue b/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryListValue.vue
index c21e14cb8..806569d28 100644
--- a/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryListValue.vue
+++ b/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryListValue.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="repository-list-value-wrapper" class="flex flex-col min-min-h-[46px] h-auto gap-[6px]">
-    <div class="font-inter text-sm font-semibold leading-5">
+    <div class="font-inter text-sm font-semibold leading-5 truncate">
       {{ colName }}
     </div>
     <div v-if="text" class="text-sn-dark-grey font-inter text-sm font-normal leading-5">
diff --git a/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryNumberValue.vue b/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryNumberValue.vue
index 33385ac47..32c301c0a 100644
--- a/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryNumberValue.vue
+++ b/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryNumberValue.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="repository-number-value-wrapper" class="flex flex-col min-min-h-[46px] h-auto gap-[6px]">
     <div class="font-inter text-sm font-semibold leading-5 flex justify-between">
-      <div>{{ colName }}</div>
+      <div class="truncate w-4/5">{{ colName }}</div>
       <div @click="toggleExpandContent" v-show="expendable" class="font-normal leading-5 btn-text-link">
         {{ this.contentExpanded ? i18n.t('repositories.item_card.repository_number_value.collapse') :
           i18n.t('repositories.item_card.repository_number_value.expand') }}
diff --git a/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryStatusValue.vue b/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryStatusValue.vue
index 65f153ae0..112cfa582 100644
--- a/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryStatusValue.vue
+++ b/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryStatusValue.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="repository-status-value-wrapper" class="flex flex-col min-min-h-[46px] h-auto gap-[6px]">
-    <div class="font-inter text-sm font-semibold leading-5">
+    <div class="font-inter text-sm font-semibold leading-5 truncate">
       {{ colName }}
     </div>
     <div v-if="status && icon"
diff --git a/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryStockValue.vue b/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryStockValue.vue
index 1b11b9e28..c656f852c 100644
--- a/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryStockValue.vue
+++ b/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryStockValue.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="repository-stock-value-wrapper" class="flex flex-col min-min-h-[46px] h-auto gap-[6px]">
     <div class="font-inter text-sm font-semibold leading-5 relative">
-      <span>{{ colName }}</span>
+      <span class="truncate w-full inline-block pr-[50px]">{{ colName }}</span>
       <a style="text-decoration: none;" class="absolute right-0 btn-text-link font-normal export-consumption-button"
         v-if="permissions?.can_export_repository_stock === true && colVal?.stock_formatted" :data-rows="JSON.stringify([repositoryRowId])"
         :data-object-id="repositoryId">
diff --git a/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryTextValue.vue b/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryTextValue.vue
index 694e14d97..7967a2e94 100644
--- a/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryTextValue.vue
+++ b/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryTextValue.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="repository-text-value-wrapper" class="flex flex-col min-min-h-[46px] h-auto gap-[6px]">
     <div class="font-inter text-sm font-semibold leading-5 flex justify-between">
-      <div>{{ colName }}</div>
+      <div class="truncate w-4/5">{{ colName }}</div>
       <div @click="toggleExpandContent" v-show="expendable" class="font-normal leading-5 btn-text-link">
         {{ this.contentExpanded ? i18n.t('repositories.item_card.repository_text_value.collapse') :
           i18n.t('repositories.item_card.repository_text_value.expand') }}
diff --git a/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryTimeRangeValue.vue b/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryTimeRangeValue.vue
index a3172165a..d8224e915 100644
--- a/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryTimeRangeValue.vue
+++ b/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryTimeRangeValue.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="repository-time-range-value-wrapper" class="flex flex-col min-min-h-[46px] h-auto gap-[6px]">
-    <div class="font-inter text-sm font-semibold leading-5">
+    <div class="font-inter text-sm font-semibold leading-5 truncate">
       {{ colName }}
     </div>
     <div v-if="start_time?.formatted && end_time?.formatted"
diff --git a/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryTimeValue.vue b/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryTimeValue.vue
index 47a2fb01d..d2e8b3eab 100644
--- a/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryTimeValue.vue
+++ b/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryTimeValue.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="repository-time-value-wrapper" class="flex flex-col min-min-h-[46px] h-auto gap-[6px]">
-    <div class="font-inter text-sm font-semibold leading-5">
+    <div class="font-inter text-sm font-semibold leading-5 truncate">
       {{ colName }}
     </div>
     <div v-if="formatted" class="text-sn-dark-grey font-inter text-sm font-normal leading-5 flex">