Fix file upload and edit interactions on steps page [SCI-6969]

app/assets/stylesheets/steps/step_attachments.scss

@@ -25,6 +25,7 @@
         @include font-small;
         color: $color-silver-chalice;
         padding-left: 1em;
+        pointer-events: none;
       }
 
       a {

app/javascript/vue/protocol/attachments.vue

@@ -17,10 +17,35 @@
             <li class="divider-label">{{ i18n.t("protocols.steps.attachments.add") }}</li>
             <li>
               <a class="action-link .attachments-view-mode {" @click="$emit('attachments:openFileModal')">
-                <i class="fas fa-paperclip"></i>
+                <i class="fas fa-upload"></i>
                 {{ i18n.t('protocols.steps.insert.attachment') }}
               </a>
             </li>
+            <li v-if="step.attributes.marvinjs_enabled">
+              <a
+                class="new-marvinjs-upload-button"
+                :data-object-id="step.id"
+                data-object-type="Step"
+                :data-marvin-url="step.attributes.marvinjs_context.marvin_js_asset_url"
+                :data-sketch-container="`.attachments[data-step-id=${step.id}]`"
+              >
+                <span class="new-marvinjs-upload-icon">
+                  <img v-bind:src="marvinjsIcon">
+                </span>
+                  {{ i18n.t('marvinjs.new_li_button') }}
+              </a>
+            </li>
+            <li v-if="step.attributes.bio_eddie_service_enabled">
+              <a
+                class="new-bio-eddie-upload-button"
+                :data-object-id="step.id"
+                data-object-type="Step"
+                :data-assets-container="`.attachments[data-step-id=${step.id}]`"
+              >
+                <img v-bind:src="bioEddieIcon">
+                {{ i18n.t('bio_eddie.new_button') }}
+              </a>
+            </li>
             <li role="separator" class="divider"></li>
             <li class="divider-label">{{ i18n.t("protocols.steps.attachments.sort_by") }}</li>
             <li v-for="(orderOption, index) in orderOptions" :key="`orderOption_${index}`">
@@ -66,7 +91,8 @@
   import inlineAttachment from 'vue/protocol/step_attachments/inline.vue'
   import thumbnailAttachment from 'vue/protocol/step_attachments/thumbnail.vue'
   import uploadingAttachment from 'vue/protocol/step_attachments/uploading.vue'
-
+  import marvinjsIcon from 'images/icon_small/marvinjs.svg'
+  import bioEddieIcon from 'images/icon_small/bio_eddie.png'
 
   export default {
     name: 'Attachments',
@@ -82,6 +108,8 @@
     },
     data() {
       return {
+        marvinjsIcon,
+        bioEddieIcon,
         viewModeOptions: ['inline', 'thumbnail', 'list'],
         orderOptions: ['new', 'old', 'atoz', 'ztoa'],
       }

app/javascript/vue/protocol/step_attachments/file_modal.vue

@@ -114,6 +114,7 @@
         }
       },
       dropFile(e) {
+        e.stopPropagation();
         if (e.dataTransfer && e.dataTransfer.files.length) {
           $(this.$refs.modal).modal('hide');
           this.$emit('files', e.dataTransfer.files);

app/serializers/step_serializer.rb

@@ -7,8 +7,20 @@ class StepSerializer < ActiveModel::Serializer
   include CommentHelper
 
   attributes :name, :position, :completed, :urls, :assets_view_mode, :assets_order,
-             :marvinjs_enabled, :marvinjs_context, :wopi_enabled, :wopi_context, :comments_count, :unseen_comments,
+             :marvinjs_enabled, :bio_eddie_service_enabled, :bio_eddie_context, :marvinjs_context,
-             :storage_limit
+             :wopi_enabled, :wopi_context, :comments_count, :unseen_comments, :storage_limit
+
+  def bio_eddie_service_enabled
+    BioEddieService.enabled?(@instance_options[:user])
+  end
+
+  def bio_eddie_context
+    if bio_eddie_service_enabled
+      {
+        marvin_js_asset_url: marvin_js_assets_path
+      }
+    end
+  end
 
   def marvinjs_enabled
     MarvinJsService.enabled?

app/views/assets/_asset_context_menu.html.erb

@@ -61,6 +61,12 @@
               <%= t('assets.file_preview.edit_in_scinote') %>
             </a>
           </li>
+          <li>
+            <a class="btn btn-light file-download-link" href="<%= rails_blob_path(asset.file, disposition: 'attachment') %>" data-turbolinks="false">
+              <span class="fas fa-download"></span>
+              <%= t('Download') %>
+            </a>
+          </li>
           <li role="separator" class="divider"></li>
         <% end %>
       <% end %>

config/locales/en.yml

@@ -2539,7 +2539,7 @@ en:
         table: 'Add table'
         text: 'Add text'
         checklist: 'Add checklist'
-        attachment: 'Add file'
+        attachment: 'File from your PC'
         checklist_item: 'Add a new checklist item...'
       table:
         default_name: 'Table %{position}'

config/webpacker.yml

@@ -11,7 +11,7 @@ default: &default
 
   # Additional paths webpack should lookup modules
   # ['app/assets', 'engine/foo/app/assets']
-  resolved_paths: []
+  resolved_paths: ['app/assets']
 
   # Reload manifest.json on all requests so we reload latest compiled packs
   cache_manifest: false