Merge pull request #6000 from rekonder/aj_SCI_8948

Create new sequence attachment on task protocol step [SCI-8948]

app/controllers/gene_sequence_assets_controller.rb

@@ -5,7 +5,7 @@ class GeneSequenceAssetsController < ApplicationController
 
   skip_before_action :verify_authenticity_token
 
-  before_action :check_open_vector_service_enabled, except: :edit
+  before_action :check_open_vector_service_enabled, except: %i(new edit)
   before_action :load_vars, except: %i(new create)
   before_action :load_create_vars, only: %i(new create)
 
@@ -20,7 +20,6 @@ class GeneSequenceAssetsController < ApplicationController
   def edit
     @file_url = rails_representation_url(@asset.file)
     @file_name = @asset.render_file_name
-    @ove_enabled = OpenVectorEditorService.enabled?
     render :edit, layout: false
   end
 
@@ -71,6 +70,7 @@ class GeneSequenceAssetsController < ApplicationController
   end
 
   def load_vars
+    @ove_enabled = OpenVectorEditorService.enabled?
     @asset = current_team.assets.find_by(id: params[:id])
     return render_404 unless @asset
 
@@ -86,6 +86,7 @@ class GeneSequenceAssetsController < ApplicationController
   end
 
   def load_create_vars
+    @ove_enabled = OpenVectorEditorService.enabled?
     @parent = case params[:parent_type]
               when 'Step'
                 Step.find_by(id: params[:parent_id])

app/javascript/vue/ove/OpenVectorEditor.vue

@@ -3,7 +3,11 @@
     <div class="ove-header flex justify-between">
       <span class="file-name flex items-center ml-3">
         <div class="sci-input-container">
-          <input v-model="sequenceName" class="sci-input-field" type="text" :disabled="readOnly" />
+          <input v-model="sequenceName"
+                 class="sci-input-field" 
+                 type="text"
+                 :disabled="readOnly"
+                 :placeholder="i18n.t('open_vector_editor.sequence_name_placeholder')"/>
         </div>
       </span>
       <div v-if="oveEnabledDaysLeft <= 30" class="flex items-center">
@@ -72,7 +76,7 @@
       }
 
       this.editor = window.createVectorEditor(this.$refs.container, editorConfig);
-      this.sequenceName = this.fileName || this.i18n.t('open_vector_editor.default_sequence_name');
+      this.sequenceName = this.fileName;
 
       if (this.fileUrl) {
         this.loadFile();
@@ -106,7 +110,7 @@
             this.updateUrl,
             {
               sequence_data: sequenceDataToSave,
-              sequence_name: this.sequenceName,
+              sequence_name: this.sequenceName || this.i18n.t('open_vector_editor.default_sequence_name'),
               base64_image: base64image
             }
           ).then(() => {

app/javascript/vue/protocol/attachments.vue

@@ -27,6 +27,12 @@
                 {{ i18n.t('protocols.steps.attachments.menu.office_file') }}
               </a>
             </li>
+            <li v-if="step.attributes.open_vector_editor_context.new_sequence_asset_url">
+              <a @click="openOVEditor" class="open-vector-editor-button" tabindex="0" @keyup.enter="openOVEditor">
+                <img :src="step.attributes.open_vector_editor_context.icon"/>
+                {{ i18n.t('open_vector_editor.new_sequence_file') }}
+              </a>
+            </li>
             <li v-if="step.attributes.marvinjs_enabled">
               <a
                 class="new-marvinjs-upload-button"
@@ -185,6 +191,9 @@
           }
         });
       },
+      openOVEditor() {
+        window.showIFrameModal(this.step.attributes.open_vector_editor_context.new_sequence_asset_url);
+      },
       handleDropdownPosition() {
         this.$refs.actionsDropdownButton.classList.toggle("dropup", !this.isInViewport(this.$refs.actionsDropdown));
       },

app/javascript/vue/protocol/step_attachments/context_menu.vue

@@ -20,8 +20,8 @@
           {{ attachment.attributes.wopi_context.button_text }}
         </a>
       </li>
-      <li v-if="attachment.attributes.asset_type == 'gene_sequence'">
-        <a class="ove-edit-button" @click="openOVEditor(attachment.attributes.edit_url)">
+      <li v-if="attachment.attributes.asset_type == 'gene_sequence' && attachment.attributes.urls.open_vector_editor_edit">
+        <a class="ove-edit-button" @click="openOVEditor(attachment.attributes.urls.open_vector_editor_edit)">
           <span class="sn-icon sn-icon-edit"></span>
           {{ i18n.t('open_vector_editor.edit_sequence') }}
         </a>

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

@@ -34,7 +34,7 @@
               {{ i18n.t("protocols.steps.attachments.file_modal.drag_zone_notification", {position: step.attributes.position + 1}) }}
             </div>
           </div>
-          <div class="divider" v-if="step.attributes.marvinjs_enabled || step.attributes.wopi_enabled">
+          <div class="divider" v-if="step.attributes.marvinjs_enabled || step.attributes.wopi_enabled || step.attributes.open_vector_editor_context.new_sequence_asset_url">
             {{ i18n.t("protocols.steps.attachments.file_modal.or") }}
           </div>
           <div class="integrations-container">
@@ -44,6 +44,12 @@
                 {{ i18n.t('assets.create_wopi_file.button_text') }}
               </a>
             </div>
+            <div class="integration-block" v-if="step.attributes.open_vector_editor_context.new_sequence_asset_url">
+              <a @click="openOVEditor" class="open-vector-editor-button btn btn-light">
+                <img :src="step.attributes.open_vector_editor_context.icon"/>
+                {{ i18n.t('open_vector_editor.new_sequence') }}
+              </a>
+            </div>
             <div class="integration-block marvinjs" v-if="step.attributes.marvinjs_enabled">
               <a
                 class="new-marvinjs-upload-button btn btn-light"
@@ -57,15 +63,10 @@
                 <span class="new-marvinjs-upload-icon">
                   <img :src="step.attributes.marvinjs_context.icon"/>
                 </span>
-                {{ i18n.t('marvinjs.new_button') }}
+                {{ i18n.t('marvinjs.new_li_button') }}
               </a>
             </div>
           </div>
-          <div class="integration-block open-vector-editor-button">
-            <a @click="openOVEditor">
-              {{  i18n.t('open_vector_editor.new_sequence') }}
-            </a>
-          </div>
         </div>
         <div class="modal-footer">
           <button type='button' class='btn btn-secondary' @click="cancel">
@@ -156,7 +157,7 @@
       },
       openOVEditor() {
         $(this.$refs.modal).modal('hide');
-        window.showIFrameModal(this.step.attributes.new_sequence_url);
+        window.showIFrameModal(this.step.attributes.open_vector_editor_context.new_sequence_asset_url);
       }
     }
   }

app/serializers/asset_serializer.rb

@@ -12,8 +12,7 @@ class AssetSerializer < ActiveModel::Serializer
              :file_size, :medium_preview, :large_preview, :asset_type, :wopi,
              :wopi_context, :pdf_previewable, :file_size_formatted, :asset_order,
              :updated_at, :metadata, :image_editable, :image_context, :pdf, :attached,
-             :edit_url, :preview_image
-
+             :preview_image
 
   def icon
     file_fa_icon_class(object)
@@ -55,10 +54,6 @@ class AssetSerializer < ActiveModel::Serializer
     object.file.metadata&.dig(:asset_type)
   end
 
-  def edit_url
-    edit_gene_sequence_asset_path(object.id) if object.file.metadata&.dig(:asset_type) == 'gene_sequence'
-  end
-
   def metadata
     object.file.metadata
   end
@@ -137,6 +132,7 @@ class AssetSerializer < ActiveModel::Serializer
         delete: asset_destroy_path(object)
       )
     end
+    urls[:open_vector_editor_edit] = edit_gene_sequence_asset_path(object.id) if can_manage_asset?(user, object)
     urls[:wopi_action] = object.get_action_url(user, 'embedview') if wopi && can_manage_asset?(user, object)
     urls[:blob] = rails_blob_path(object.file, disposition: 'attachment') if object.file.attached?
 

app/serializers/step_serializer.rb

@@ -10,7 +10,7 @@ class StepSerializer < ActiveModel::Serializer
   attributes :name, :position, :completed, :attachments_manageble, :urls, :assets_view_mode,
              :marvinjs_enabled, :marvinjs_context, :created_by, :created_at, :assets_order,
              :wopi_enabled, :wopi_context, :comments_count, :unseen_comments, :storage_limit,
-             :new_sequence_url
+             :open_vector_editor_context
 
   def marvinjs_enabled
     MarvinJsService.enabled?
@@ -25,8 +25,13 @@ class StepSerializer < ActiveModel::Serializer
     end
   end
 
-  def new_sequence_url
-    new_gene_sequence_asset_url(parent_type: 'Step', parent_id: object.id)
+  def open_vector_editor_context
+    if can_manage_step?(object)
+      {
+        new_sequence_asset_url: new_gene_sequence_asset_url(parent_type: 'Step', parent_id: object.id),
+        icon: image_path('icon_small/sequence-editor.svg')
+      }
+    end
   end
 
   def comments_count

config/locales/en.yml

@@ -3094,7 +3094,7 @@ en:
           drag_zone_title: "Upload a file from your PC"
           drag_zone_description: "You can also drag & drop files to here or into steps to upload"
           drag_zone_notification: "Drop files to add to step %{position}"
-          or: "OR"
+          or: "or create new"
         new:
           description: 'New'
           uploading: 'Uploading'
@@ -3276,7 +3276,7 @@ en:
     wopi_supported_table_formats_title: 'Only .xlsx, .xlsm, .xlsb, .ods file formats are supported for editing in Excel Online.'
     wopi_supported_presentation_formats_title: 'Only .pptx, ppsx, .odp file formats are supported for editing in PowerPoint Online.'
     create_wopi_file:
-      button_text: 'Create an MS Office file'
+      button_text: 'MS Office file'
       li_text: "Office file"
       modal_title: 'Create new Microsoft Office Online document'
       text_field_label: 'Document name'
@@ -3704,9 +3704,11 @@ en:
     no_sketches_found: "No Sketches Found"
 
   open_vector_editor:
-    new_sequence: "New sequence"
-    edit_sequence: "Edit in Sequence editor"
+    new_sequence: "Sequence file"
+    new_sequence_file: "New sequence file"
     default_sequence_name: "New sequence"
+    edit_sequence: "Edit in Sequence editor"
+    sequence_name_placeholder: "Click here to enter sequence name"
     trial_expiration_warning_html:
       one: "Your Sequence editor trial expires in %{count} day. <a href='mailto:support@scinote.net'> Contact SciNote for more information.</a>"
       other: "Your Sequence editor trial expires in %{count} days. <a href='mailto:support@scinote.net'> Contact SciNote for more information.</a>"

public/images/icon_small/sequence-editor.svg

@@ -0,0 +1,10 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.4923 3.51517C10.0704 3.60025 8.69275 4.04129 7.48581 4.79777C6.27887 5.55426 5.28139 6.60192 4.58502 7.84452C3.88865 9.08711 3.51572 10.4848 3.50049 11.9091C3.48526 13.3335 3.82822 14.7388 4.49786 15.996" stroke="#1D2939" stroke-linecap="round"/>
+<path d="M11.5501 6.51843C10.6743 6.59031 9.8284 6.87102 9.08335 7.33704C8.3383 7.80307 7.71577 8.44084 7.26789 9.19694C6.82001 9.95304 6.55984 10.8055 6.50916 11.6828C6.45847 12.5601 6.61875 13.4368 6.97658 14.2395" stroke="#1D2939" stroke-linecap="round"/>
+<path d="M10.7142 14.144C11.0835 14.3654 11.5036 14.4878 11.934 14.4991C12.3644 14.5105 12.7904 14.4105 13.1708 14.2089" stroke="#1D2939" stroke-linecap="round"/>
+<path d="M11.5231 9.54591C11.0365 9.64048 10.5889 9.87759 10.2374 10.2271C9.88584 10.5766 9.64613 11.0227 9.54873 11.5088" stroke="#1D2939" stroke-linecap="round"/>
+<path d="M16.4528 15.2284C17.2432 14.1382 17.6062 12.7958 17.473 11.4558" stroke="#1D2939" stroke-linecap="round"/>
+<path d="M8.8669 16.5204C9.66189 17.0714 10.5881 17.403 11.5522 17.4817C12.5163 17.5605 13.4841 17.3836 14.358 16.9689" stroke="#1D2939" stroke-linecap="round"/>
+<path d="M19.4459 7.90013C18.6397 6.43599 17.4197 5.24203 15.9386 4.46756" stroke="#1D2939" stroke-linecap="round"/>
+<path d="M6.52764 18.5041C7.79803 19.573 9.35364 20.2464 11.0024 20.4413C12.6512 20.6361 14.3209 20.3439 15.8054 19.6006C17.29 18.8573 18.5244 17.6955 19.3562 16.2587C20.188 14.8219 20.5808 13.1729 20.4862 11.5154" stroke="#1D2939" stroke-linecap="round"/>
+</svg>