Fixed no file preview on item card [SCI-9474]

app/javascript/vue/repository_item_sidebar/RepositoryItemSidebar.vue

@@ -95,7 +95,8 @@
               <div v-if="customColumns?.length > 0" class="flex flex-col gap-4 w-[350px] h-auto">
                 <div v-for="(column, index) in customColumns" class="flex flex-col gap-4 w-[350px] h-auto">
                   <component :is="column.data_type" :key="index" :data_type="column.data_type" :colId="column.id"
-                    :colName="column.name" :colVal="column.value" :repositoryRowId="repositoryRowId" :permissions="permissions" />
+                    :colName="column.name" :colVal="column.value" :repositoryRowId="repositoryRowId"
+                    :permissions="permissions" @closeSidebar="toggleShowHideSidebar(null)" />
                   <div id="dashed-divider" :class="{ 'hidden': index === customColumns.length - 1 }"
                     class="flex h-[1px] py-0 border-dashed border-[1px] border-sn-light-grey">
                   </div>
@@ -246,6 +247,12 @@ export default {
         this.currentItemUrl = null
         return
       }
+      // explicit close (from emit)
+      else if (repositoryRowUrl === null) {
+        this.isShowing = false
+        this.currentItemUrl = null
+        return
+      }
       // click on a different item - should just fetch new data
       else {
         this.loadRepositoryRow(repositoryRowUrl)
@@ -260,6 +267,7 @@ export default {
         url: repositoryRowUrl,
         dataType: 'json',
         success: (result) => {
+          this.repositoryRowId = result.id
           this.repositoryName = result.repository_name;
           this.defaultColumns = result.default_columns;
           this.customColumns = result.custom_columns;

app/javascript/vue/repository_item_sidebar/repository_values/RepositoryAssetValue.vue

@@ -5,9 +5,13 @@
     </div>
     <div v-if="file_name" @mouseover="tooltipShowing = true" @mouseout="tooltipShowing = false"
       class="w-fit cursor-pointer text-sn-science-blue">
-      {{ file_name }}
-      <tooltip-preview v-if="tooltipShowing" :url="url" :file_name="file_name" :preview_url="preview_url"
-        :icon_html="icon_html"></tooltip-preview>
+      <a @click="$emit('closeSidebar')" class="file-preview-link" :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>
+      <tooltip-preview v-if="tooltipShowing && medium_preview_url" :id="id" :url="url" :file_name="file_name"
+        :preview_url="preview_url" :icon_html="icon_html" :medium_preview_url="medium_preview_url">
+      </tooltip-preview>
     </div>
     <div v-else class="text-sn-dark-grey font-inter text-sm font-normal leading-5">
       {{ i18n.t('repositories.item_card.repository_asset_value.no_asset') }}
@@ -30,7 +34,8 @@ export default {
       url: null,
       preview_url: null,
       file_name: null,
-      icon_html: null
+      icon_html: null,
+      medium_preview_url: null,
     }
   },
   props: {
@@ -45,6 +50,12 @@ export default {
     this.preview_url = this.colVal.preview_url
     this.file_name = this.colVal.file_name
     this.icon_html = this.colVal.icon_html
-  }
+    this.medium_preview_url = this.colVal.medium_preview_url
+  },
+  computed: {
+    modalPreviewLinkId() {
+      return `modal_link${this.id}`
+    }
+  },
 }
 </script>

app/javascript/vue/repository_item_sidebar/repository_values/TooltipPreview.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="absolute">
-    <img :src="this.url"
+    <img :src="this.medium_preview_url"
       class="absolute bg-sn-light-grey text-sn-black w-[300px] h-[260px] rounded pointer-events-none flex shadow-lg shrink-0" />
   </div>
 </template>
@@ -14,6 +14,7 @@ export default {
     preview_url: String,
     file_name: String,
     icon_html: String || null,
+    medium_preview_url: String || null,
   },
 }
 </script>

app/serializers/repository_datatable/repository_asset_value_serializer.rb

@@ -13,7 +13,8 @@ module RepositoryDatatable
         url: rails_blob_path(asset.file, disposition: 'attachment'),
         preview_url: asset_file_preview_path(asset),
         file_name: escape_input(asset.file_name),
-        icon_html: sn_icon_for(asset)
+        icon_html: sn_icon_for(asset),
+        medium_preview_url: asset.previewable? && rails_representation_url(asset.medium_preview)
       }
     rescue StandardError => e
       Rails.logger.error e.message