Storage locations fixes [SCI-11058]

app/controllers/concerns/active_storage/check_blob_permissions.rb

@@ -28,6 +28,8 @@ module ActiveStorage
         check_tinymce_asset_read_permissions(attachment.record)
       when 'Experiment'
         can_read_experiment?(attachment.record)
+      when 'StorageLocation'
+        can_read_storage_location?(attachment.record)
       when 'Report'
         can_read_project?(attachment.record.project)
       when 'User'

app/controllers/storage_locations_controller.rb

@@ -10,7 +10,10 @@ class StorageLocationsController < ApplicationController
 
   def index
     respond_to do |format|
-      format.html
+      format.html do
+        @parent_location = StorageLocation.viewable_by_user(current_user)
+                                          .find_by(id: storage_location_params[:parent_id]) if storage_location_params[:parent_id]
+      end
       format.json do
         storage_locations = Lists::StorageLocationsService.new(current_user, current_team, params).call
         render json: storage_locations, each_serializer: Lists::StorageLocationSerializer,

app/javascript/vue/storage_locations/modals/assign/position_selector.vue

@@ -62,7 +62,7 @@ export default {
       return available_positions_storage_location_path(this.selectedContainerId);
     },
     availableRows() {
-      return Object.keys(this.availablePositions).map((row) => [row, row]);
+      return Object.keys(this.availablePositions).map((row) => [row, this.convertNumberToLetter(row)]);
     },
     availableColumns() {
       return (this.availablePositions[this.selectedRow] || []).map((col) => [col, col]);
@@ -74,6 +74,12 @@ export default {
       selectedRow: null,
       selectedColumn: null
     };
+  },
+  methods: {
+    convertNumberToLetter(number) {
+      const charCode = 96 + parseInt(number, 10);
+      return String.fromCharCode(charCode).toUpperCase();
+    }
   }
 };
 </script>

app/javascript/vue/storage_locations/renderers/storage_name_renderer.vue

@@ -0,0 +1,45 @@
+<template>
+  <div @mouseenter="openPreview" @mouseleave="hidePreview">
+    <a class="hover:no-underline flex items-center gap-1"
+       :title="params.data.name"
+       :href="params.data.urls.show">
+      <i v-if="params.data.shared || params.data.ishared" class="fas fa-users"></i>
+      <i v-if="params.data.container" class="sn-icon sn-icon-item"></i>
+      <span class="truncate">{{ params.data.name }}</span>
+    </a>
+    <GeneralDropdown v-if="params.data.img_url" ref="imagePreview" >
+      <template v-slot:flyout>
+        <img class="w-48 h-48 object-cover" :src="params.data.img_url" @mouseenter="openPreview" @mouseleave="hidePreview">
+      </template>
+    </GeneralDropdown>
+  </div>
+</template>
+
+<script>
+import GeneralDropdown from '../../shared/general_dropdown.vue';
+
+export default {
+  name: 'StorageNameRenderer',
+  components: {
+    GeneralDropdown
+  },
+  props: {
+    params: {
+      type: Object,
+      required: true
+    }
+  },
+  methods: {
+    openPreview() {
+      if (this.$refs.imagePreview) {
+        this.$refs.imagePreview.isOpen = true;
+      }
+    },
+    hidePreview() {
+      if (this.$refs.imagePreview) {
+        this.$refs.imagePreview.isOpen = false;
+      }
+    }
+  }
+};
+</script>

app/javascript/vue/storage_locations/table.vue

@@ -54,6 +54,7 @@ import MoveModal from './modals/move.vue';
 import ConfirmationModal from '../shared/confirmation_modal.vue';
 import ShareObjectModal from '../shared/share_modal.vue';
 import DescriptionRenderer from './renderers/description.vue';
+import NameRenderer from './renderers/storage_name_renderer.vue';
 
 export default {
   name: 'RepositoriesTable',
@@ -63,7 +64,8 @@ export default {
     MoveModal,
     ConfirmationModal,
     ShareObjectModal,
-    DescriptionRenderer
+    DescriptionRenderer,
+    NameRenderer
   },
   props: {
     dataSource: {
@@ -104,7 +106,7 @@ export default {
         headerName: this.i18n.t('storage_locations.index.table.name'),
         sortable: true,
         notSelectable: true,
-        cellRenderer: this.nameRenderer
+        cellRenderer: 'NameRenderer'
       },
       {
         field: 'code',
@@ -220,28 +222,6 @@ export default {
           HelperModule.flashAlertMsg(this.i18n.t('errors.general'), 'danger');
         });
     },
-    // Renderers
-    nameRenderer(params) {
-      const {
-        name,
-        urls,
-        shared,
-        ishared
-      } = params.data;
-      let containerIcon = '';
-      if (params.data.container) {
-        containerIcon = '<i class="sn-icon sn-icon-item"></i>';
-      }
-      let sharedIcon = '';
-      if (shared || ishared) {
-        sharedIcon = '<i class="fas fa-users"></i>';
-      }
-      return `<a class="hover:no-underline flex items-center gap-1"
-                 title="${name}" href="${urls.show}">
-                 ${sharedIcon}${containerIcon}
-                 <span class="truncate">${name}</span>
-              </a>`;
-    },
     updateTable() {
       this.reloadingTable = true;
       this.objectToMove = null;

app/serializers/lists/storage_location_serializer.rb

@@ -8,12 +8,19 @@ module Lists
     include ActionView::Helpers::TextHelper
 
     attributes :id, :code, :name, :container, :description, :owned_by, :created_by,
-               :created_on, :urls, :metadata, :file_name, :sub_location_count, :is_empty, :sa_description
+               :created_on, :urls, :metadata, :file_name, :sub_location_count, :is_empty,
+               :img_url, :sa_description
 
     def owned_by
       object['team_name']
     end
 
+    def img_url
+      return unless object.image.attached?
+
+      Rails.application.routes.url_helpers.url_for(object.image)
+    end
+
     def is_empty
       object.empty?
     end

app/views/storage_locations/index.html.erb

@@ -5,7 +5,7 @@
   <div class="content-pane with-grey-background flexible">
     <div class="content-header">
       <div class="title-row">
-        <h1><%= t('storage_locations.index.head_title') %></h1>
+        <h1><%= @parent_location ? @parent_location.name : t('storage_locations.index.head_title') %></h1>
       </div>
     </div>
     <div class="content-body " data-e2e="e2e-CO-storageLocations">