Fix Move button on Experiment card

app/assets/javascripts/projects/show.js

@@ -239,6 +239,17 @@
       });
   }
 
+  function initNewExperimentToolbarButton() {
+    let forms = '.new-experiment-form';
+    $(experimentsPage)
+      .on('ajax:success', forms, function(ev, data) {
+        appendActionModal($(data.html));
+      })
+      .on('ajax:error', forms, function(ev, data) {
+        HelperModule.flashAlertMsg(data.responseJSON.message, 'danger');
+      });
+  }
+
   function init() {
     $('.workflowimg-container').each(function() {
       let container = $(this);
@@ -284,6 +295,7 @@
     initExperimentsSelector();
     initArchiveRestoreToolbarButtons();
     initEditMoveDuplicateToolbarButton();
+    initNewExperimentToolbarButton();
     initSelectAllCheckbox();
   }
 

app/assets/stylesheets/experiments.scss

@@ -36,6 +36,7 @@
     .clone-experiments-form,
     .move-experiments-form,
     .archive-experiments-form,
+    .new-experiments-form,
     .restore-experiments-form {
       display: inline-block;
     }

app/views/experiments/_move_modal.html.erb

@@ -1,11 +1,13 @@
-<div class="modal"
+<div class="modal move-experiment-modal"
      id="move-experiment-modal-<%= @experiment.id %>"
      tabindex="-1"
      role="dialog"
      aria-labelledby="move-experiment-modal-label">
-     <%= bootstrap_form_for @experiment, url: move_experiment_path(@experiment),
+     <%= bootstrap_form_for @experiment,
+                            url: move_experiment_path(@experiment),
                             method: :post,
-                            remote: true do |f| %>
+                            remote: true,
+                            html: { class: 'experiment-action-form' } do |f| %>
     <div class="modal-dialog" role="document">
       <div class="modal-content">
         <div class="modal-header">

app/views/experiments/_new_modal.html.erb

@@ -1,7 +1,10 @@
 <div class="modal" id="new-experiment-modal" tabindex="-1" role="dialog" aria-labelledby="new-experiment-modal-label">
   <div class="modal-dialog" role="document">
     <div class="modal-content">
-      <%= bootstrap_form_for [@project, @experiment], remote: true, method: :post do |f| %>
+      <%= bootstrap_form_for [@project, @experiment],
+                             remote: true,
+                             method: :post,
+                             html: { class: 'experiment-action-form' } do |f| %>
         <div class="modal-header">
           <button type="button" class="close" data-dismiss="modal" aria-label="<%= t('general.close') %>"><span aria-hidden="true">&times;</span></button>
           <h4 class="modal-title" id="new-eperiment-modal-label"><%= t("experiments.new.modal_title") %></h4>

app/views/projects/show.html.erb

@@ -32,6 +32,5 @@
   </div>
 </div>
 
-<%= javascript_include_tag("experiments/dropdown_actions") %>
 <%= javascript_include_tag("projects/show") %>
 <i data-hook="project-show-js"></i>

app/views/projects/show/_toolbar.html.erb

@@ -1,12 +1,13 @@
 <div id="projectShowToolbar" class="project-show-toolbar">
   <!-- new experiment button -->
   <% if can_create_experiments?(@project) %>
-    <%= link_to new_project_experiment_url(@project),
+    <%= button_to new_project_experiment_url(@project),
-                remote: true,
+                  remote: true,
-                type: "button",
+                  form_class: 'new-experiment-form',
-                data: {view_mode: :active},
+                  data: {view_mode: :active},
-                id: 'new-experiment',
+                  id: 'new-experiment',
-                class: 'btn btn-primary' do %>
+                  method: :get,
+                  class: 'btn btn-primary' do %>
       <span class="fas fa-plus" aria-hidden="true"></span>
       <span class="hidden-xs"><%= t('experiments.toolbar.new_button') %></span>
     <% end %>