Merge pull request #7997 from artoscinote/ma_SCI_11218

UI fixes for File versions modal [SCI-11218]

app/controllers/assets_controller.rb

@@ -404,7 +404,8 @@ class AssetsController < ApplicationController
     render(
       json: ActiveModel::SerializableResource.new(
         blobs,
-        each_serializer: ActiveStorage::BlobSerializer
+        each_serializer: ActiveStorage::BlobSerializer,
+        user: current_user
       ).as_json.merge(
         enabled: VersionedAttachments.enabled?,
         enable_url: ENV.fetch('SCINOTE_FILE_VERSIONING_ENABLE_URL', nil)

app/javascript/vue/shared/content/attachments/context_menu.vue

@@ -135,6 +135,12 @@ export default {
           data_e2e: 'e2e-BT-attachmentOptions-delete'
         });
       }
+      if (this.attachment.attributes.urls.versions) {
+        menu.push({
+          text: this.i18n.t('assets.context_menu.versions'),
+          emit: 'fileVersionsModal'
+        });
+      }
       if (this.attachment.attributes.urls.toggle_view_mode) {
         this.viewModeOptions.forEach((viewMode, i) => {
           menu.push({
@@ -147,12 +153,6 @@ export default {
           });
         });
       }
-      if (this.attachment.attributes.urls.versions) {
-        menu.push({
-          text: this.i18n.t('assets.context_menu.versions'),
-          emit: 'fileVersionsModal'
-        });
-      }
       return menu;
     }
   },

app/javascript/vue/shared/file_versions_modal.vue

@@ -12,26 +12,33 @@
           <div class="relative" v-if="fileVersions">
             <div v-for="(fileVersion, index) in fileVersions" :key="fileVersion.id">
               <div class="flex w-full border border-sn-light-grey rounded mb-1.5 p-1.5 items-center">
-                <div class="basis-3/4">
+                <div class="basis-full">
                   <div class="mb-1.5">
                     <span v-if="fileVersion.attributes.version === 1" class="bg-sn-science-blue text-sn-white me-2 px-2 py-0.5 rounded">
                       {{ i18n.t("assets.file_versions_modal.original_file") }}
                     </span>
                     <span v-else class="bg-sn-grey-300 me-2 px-2 py-0.5 rounded">v{{ fileVersion.attributes.version }}</span>
-                    <a :href="fileVersion.attributes.url" target="_blank">{{ fileVersion.attributes.filename }}</a>
+                    <a :href="fileVersion.attributes.url" target="_blank" class="align-text-bottom">
+                      <span :class="{
+                          'max-w-80': !fileVersion.attributes.restored_from_version && fileVersion.attributes.version !== 1,
+                          'max-w-64': !!fileVersion.attributes.restored_from_version || fileVersion.attributes.version === 1
+                        }"
+                        class="text-ellipsis overflow-hidden text-nowrap inline-block align-middle"
+                      >{{ fileVersion.attributes.basename }}.</span><span class="inline-block align-middle">{{ fileVersion.attributes.extension }}</span>
+                    </a>
                     <small class="inline-block ml-1" v-if="fileVersion.attributes.restored_from_version">
                       ({{ i18n.t("assets.file_versions_modal.restored_from_version", { version: fileVersion.attributes.restored_from_version }) }})
                     </small>
                   </div>
                   <div class="flex text-xs text-sn-grey justify-start">
                     <div class="mr-3">{{ fileVersion.attributes.created_at }}</div>
-                    <div class="mr-3">{{ fileVersion.attributes.created_by.full_name }}</div>
+                    <div class="mr-3 text-nowrap text-ellipsis overflow-hidden max-w-52">{{ fileVersion.attributes.created_by.full_name }}</div>
-                    <div>{{ Math.round(fileVersion.attributes.byte_size/1024) }}KB</div>
+                    <div>{{ i18n.t("assets.file_versions_modal.size") }}: {{ Math.round(fileVersion.attributes.byte_size/1024) }}KB</div>
                   </div>
                 </div>
 
                 <div class="basis-1/4 flex justify-end">
-                  <a class="btn btn-icon p-0 mr-3"đ
+                  <a class="btn btn-icon p-0 px-2 hover:bg-sn-light-grey"
                     v-if="enabled || index === 0"
                     :href="fileVersion.attributes.url"
                     target="_blank"
@@ -44,7 +51,7 @@
                     @click="restoreVersion(fileVersion.attributes.version)"
                     data-render-tooltip="true"
                     :title="i18n.t('assets.file_versions_modal.restore')"
-                    class="btn btn-icon p-0 mr-3"
+                    class="btn btn-icon p-0 px-2 hover:bg-sn-light-grey"
                   >
                     <i class="sn-icon sn-icon-restore"></i>
                   </a>

app/serializers/active_storage/blob_serializer.rb

@@ -4,7 +4,15 @@ module ActiveStorage
   class BlobSerializer < ActiveModel::Serializer
     include Rails.application.routes.url_helpers
 
-    attributes :filename, :url, :created_at, :byte_size, :version, :restored_from_version, :created_by
+    attributes :filename, :extension, :basename, :url, :created_at, :byte_size, :version, :restored_from_version, :created_by
+
+    def basename
+      object.filename.base
+    end
+
+    def extension
+      object.filename.extension_without_delimiter
+    end
 
     def version
       object.metadata['version'] || 1
@@ -15,7 +23,9 @@ module ActiveStorage
     end
 
     def created_at
-      object.created_at.strftime('%B %d, %Y at %H:%M')
+      return object.created_at unless @instance_options[:user]
+
+      object.created_at.strftime("#{@instance_options[:user].date_format}, %H:%M")
     end
 
     def created_by