Add description modal to storage locations [SCI-11082]

app/javascript/vue/storage_locations/modals/description.vue

@@ -0,0 +1,35 @@
+<template>
+  <div ref="modal" class="modal" tabindex="-1" role="dialog">
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+            <i class="sn-icon sn-icon-close"></i>
+          </button>
+          <h4 class="modal-title truncate !block" id="edit-project-modal-label" :title="experiment.name">
+            {{ experiment.name }}
+          </h4>
+        </div>
+        <div class="modal-body">
+          <div class="[&_.atwho-user-container]:!whitespace-normal whitespace-pre-wrap" v-html="experiment.sa_description"></div>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-primary" data-dismiss="modal">{{ i18n.t('general.close') }}</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import modalMixin from '../../shared/modal_mixin';
+
+export default {
+  name: 'DescriptionModal',
+  props: {
+    experiment: Object
+  },
+  mixins: [modalMixin]
+};
+</script>

app/javascript/vue/storage_locations/renderers/description.vue

@@ -1,5 +1,15 @@
 <template>
-  <div v-html="params.data.sa_description"></div>
+  <div v-if="params.data.sa_description" class="group relative flex items-center group-hover:marker text-xs h-full w-full leading-[unset]">
+    <div class="flex gap-2 w-full items-center text-sm leading-[unset]">
+      <span class="cursor-pointer line-clamp-1 leading-[unset]"
+            @click.stop="showDescriptionModal"
+            v-html="params.data.sa_description">
+      </span>
+      <span @click.stop="showDescriptionModal" class="text-sn-blue cursor-pointer shrink-0 inline-block text-sm">
+        {{ i18n.t('experiments.card.more') }}
+      </span>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -7,9 +17,18 @@ export default {
   name: 'DescriptionRenderer',
   props: {
     params: {
-      type: Object,
       required: true
     }
+  },
+  computed: {
+    shouldTruncateText() {
+      return this.params.data.description?.length > 60;
+    }
+  },
+  methods: {
+    showDescriptionModal() {
+      this.params.dtComponent.$emit('showDescription', null, [this.params.data]);
+    }
   }
 };
 </script>

app/javascript/vue/storage_locations/table.vue

@@ -13,6 +13,7 @@
                @duplicate="duplicate"
                @tableReloaded="reloadingTable = false"
                @move="move"
+               @showDescription="showDescription"
                @delete="deleteStorageLocation"
                @share="share"
     />
@@ -25,6 +26,10 @@
                  :directUploadUrl="directUploadUrl"
                  :editStorageLocation="editStorageLocation"
       />
+      <DescriptionModal
+        v-if="descriptionModalObject"
+        :experiment="descriptionModalObject"
+        @close="descriptionModalObject = null"/>
       <MoveModal v-if="objectToMove" :moveToUrl="moveToUrl"
              :selectedObject="objectToMove"
              @close="objectToMove = null" @move="updateTable()" />
@@ -52,6 +57,7 @@ import DataTable from '../shared/datatable/table.vue';
 import EditModal from './modals/new_edit.vue';
 import MoveModal from './modals/move.vue';
 import ConfirmationModal from '../shared/confirmation_modal.vue';
+import DescriptionModal from './modals/description.vue';
 import ShareObjectModal from '../shared/share_modal.vue';
 import DescriptionRenderer from './renderers/description.vue';
 import NameRenderer from './renderers/storage_name_renderer.vue';
@@ -65,7 +71,8 @@ export default {
     ConfirmationModal,
     ShareObjectModal,
     DescriptionRenderer,
-    NameRenderer
+    NameRenderer,
+    DescriptionModal
   },
   props: {
     dataSource: {
@@ -96,7 +103,8 @@ export default {
       moveToUrl: null,
       shareStorageLocation: null,
       storageLocationDeleteTitle: '',
-      storageLocationDeleteDescription: ''
+      storageLocationDeleteDescription: '',
+      descriptionModalObject: null
     };
   },
   computed: {
@@ -143,8 +151,10 @@ export default {
         field: 'sa_description',
         headerName: this.i18n.t('storage_locations.index.table.description'),
         sortable: false,
-        notSelectable: true,
-        cellRenderer: 'DescriptionRenderer'
+        cellStyle: { 'white-space': 'normal' },
+        cellRenderer: DescriptionRenderer,
+        autoHeight: true,
+        minWidth: 110
       }];
 
       return columns;
@@ -254,6 +264,9 @@ export default {
         });
       }
     },
+    showDescription(_e, storageLocation) {
+      [this.descriptionModalObject] = storageLocation;
+    },
     share(_event, rows) {
       const [storageLocation] = rows;
       this.shareStorageLocation = storageLocation;