Merge pull request #4406 from okriuchykhin/ok_SCI_7158

Make experiment card dropdown menu async [SCI-7158]

app/assets/javascripts/projects/show.js

@@ -1,4 +1,4 @@
-/* global animateSpinner filterDropdown Sidebar Turbolinks HelperModule InfiniteScroll GLOBAL_CONSTANTS */
+/* global animateSpinner filterDropdown Sidebar Turbolinks HelperModule InfiniteScroll AsyncDropdown GLOBAL_CONSTANTS */
 /* eslint-disable no-use-before-define */
 (function() {
   const PERMISSIONS = ['editable', 'archivable', 'restorable', 'moveable', 'duplicable'];
@@ -374,6 +374,7 @@
     initEditMoveDuplicateToolbarButton();
     initNewExperimentToolbarButton();
     initSelectAllCheckbox();
+    AsyncDropdown.init($('#content-wrapper'));
   }
 
   init();

app/controllers/experiments_controller.rb

@@ -310,6 +310,17 @@ class ExperimentsController < ApplicationController
     end
   end
 
+  def actions_dropdown
+    if stale?([@experiment, @experiment.project])
+      render json: {
+        html: render_to_string(
+          partial: 'projects/show/experiment_actions_dropdown',
+          locals: { experiment: @experiment }
+        )
+      }
+    end
+  end
+
   private
 
   def load_experiment

app/controllers/projects_controller.rb

@@ -356,7 +356,7 @@ class ProjectsController < ApplicationController
     if stale?(@project)
       render json: {
         html: render_to_string(
-          partial: 'projects/index/project_actions_dropdown.html.erb',
+          partial: 'projects/index/project_actions_dropdown',
           locals: { project: @project }
         )
       }

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

@@ -1,89 +1,82 @@
-<% cache [current_user, experiment.project, experiment] do %>
-  <div class="dropdown experiment-actions-menu">
-    <button class="btn btn-light dropdown-toggle icon-btn" type="button" id="experimentActionsDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
-      <i class="fas fa-ellipsis-h"></i>
-    </button>
-    <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="experimentActionsDropdown">
-      <!-- Edit experiment -->
-      <% if experiment.active? && can_manage_experiment?(experiment) %>
-        <li>
-          <%= link_to edit_experiment_url(experiment),
-                      remote: true,
-                      class: 'edit-experiment experiment-action-link' do %>
-            <i class="fas fa-pen"></i>
-            <span><%= t('experiments.index.edit_option') %></span>
-          <% end %>
-        </li>
+<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="experimentActionsDropdown">
+  <!-- Edit experiment -->
+  <% if experiment.active? && can_manage_experiment?(experiment) %>
+    <li>
+      <%= link_to edit_experiment_url(experiment),
+                  remote: true,
+                  class: 'edit-experiment experiment-action-link' do %>
+        <i class="fas fa-pen"></i>
+        <span><%= t('experiments.index.edit_option') %></span>
       <% end %>
-      <!-- Duplicate experiment -->
-      <% if can_clone_experiment?(experiment) %>
-        <li>
-          <%= link_to clone_modal_experiment_url(experiment),
-                      remote: true, type: 'button',
-                      class: 'clone-experiment experiment-action-link' do %>
-            <i class="fas fa-copy"></i>
-            <span><%= t('experiments.index.clone_option') %></span>
-          <% end %>
-        </li>
+    </li>
+  <% end %>
+  <!-- Duplicate experiment -->
+  <% if can_clone_experiment?(experiment) %>
+    <li>
+      <%= link_to clone_modal_experiment_url(experiment),
+                  remote: true, type: 'button',
+                  class: 'clone-experiment experiment-action-link' do %>
+        <i class="fas fa-copy"></i>
+        <span><%= t('experiments.index.clone_option') %></span>
       <% end %>
-      <!-- Move experiment -->
-      <% if can_move_experiment?(experiment) %>
-        <li>
-          <%= link_to move_modal_experiment_url(experiment),
-                      remote: true,
-                      class: 'move-experiment experiment-action-link' do %>
-            <i class="fas fa-arrow-right"></i>
-            <span><%= t('experiments.index.move_option') %></span>
-          <% end %>
-        </li>
+    </li>
+  <% end %>
+  <!-- Move experiment -->
+  <% if can_move_experiment?(experiment) %>
+    <li>
+      <%= link_to move_modal_experiment_url(experiment),
+                  remote: true,
+                  class: 'move-experiment experiment-action-link' do %>
+        <i class="fas fa-arrow-right"></i>
+        <span><%= t('experiments.index.move_option') %></span>
       <% end %>
-      <!-- Set or view user experiment assignments -->
-      <% if can_manage_experiment_users?(experiment) %>
-        <li class="form-dropdown-item">
-          <%= link_to edit_access_permissions_project_experiment_path(project, experiment), data: { action: 'remote-modal'} do %>
-            <i class="fas fa-door-open"></i>
-            <span><%= t('experiments.index.experiment_access') %></span>
-          <% end %>
-        </li>
-      <% else %>
-        <li class="form-dropdown-item">
-          <%= link_to access_permissions_project_experiment_path(project, experiment), data: { action: 'remote-modal'} do %>
-            <i class="fas fa-door-open"></i>
-            <span><%= t('experiments.index.experiment_access') %></span>
-          <% end %>
-        </li>
+    </li>
+  <% end %>
+  <!-- Set or view user experiment assignments -->
+  <% if can_manage_experiment_users?(experiment) %>
+    <li class="form-dropdown-item">
+      <%= link_to edit_access_permissions_project_experiment_path(experiment.project, experiment), data: { action: 'remote-modal'} do %>
+        <i class="fas fa-door-open"></i>
+        <span><%= t('experiments.index.experiment_access') %></span>
       <% end %>
-      <!-- Archive/restore experiment -->
-      <% if experiment.active? && can_archive_experiment?(experiment) %>
-        <li class="form-dropdown-item">
-          <%= button_to(archive_experiment_path(experiment),
-                        method: :post,
-                        remote: true,
-                        class: 'btn btn-light',
-                        form_class: 'experiment-action-form',
-                        data: { confirm: t('experiments.index.archive_confirm') } ) do %>
-            <i class="fas fa-archive"></i>
-            <span><%= t('experiments.index.archive_option') %></span>
-        <% end %>
-        </li>
-      <% elsif experiment.archived? && can_restore_experiment?(experiment) %>
-        <li class="form-dropdown-item">
-          <%= button_to(experiment_path(experiment, format: :json),
-                        method: :put,
-                        remote: true,
-                        class: 'btn btn-light',
-                        form_class: 'experiment-action-form',
-                        params: { experiment: { archived: false } }) do %>
-            <i class="fas fa-undo"></i>
-            <span><%= t('experiments.index.restore_option') %></span>
-          <% end %>
-        </li>
+    </li>
+  <% else %>
+    <li class="form-dropdown-item">
+      <%= link_to access_permissions_project_experiment_path(experiment.project, experiment), data: { action: 'remote-modal'} do %>
+        <i class="fas fa-door-open"></i>
+        <span><%= t('experiments.index.experiment_access') %></span>
       <% end %>
-      <li class="form-dropdown-item">
-        <div class="form-dropdown-item-info">
-          <small><%= t('experiments.experiment_id') %>: <strong><%= experiment.code %></strong></small>
-        </div>
-      </li>
-    </ul>
-  </div>
-<% end %>
+    </li>
+  <% end %>
+  <!-- Archive/restore experiment -->
+  <% if experiment.active? && can_archive_experiment?(experiment) %>
+    <li class="form-dropdown-item">
+      <%= button_to(archive_experiment_path(experiment),
+                    method: :post,
+                    remote: true,
+                    class: 'btn btn-light',
+                    form_class: 'experiment-action-form',
+                    data: { confirm: t('experiments.index.archive_confirm') } ) do %>
+        <i class="fas fa-archive"></i>
+        <span><%= t('experiments.index.archive_option') %></span>
+    <% end %>
+    </li>
+  <% elsif experiment.archived? && can_restore_experiment?(experiment) %>
+    <li class="form-dropdown-item">
+      <%= button_to(experiment_path(experiment, format: :json),
+                    method: :put,
+                    remote: true,
+                    class: 'btn btn-light',
+                    form_class: 'experiment-action-form',
+                    params: { experiment: { archived: false } }) do %>
+        <i class="fas fa-undo"></i>
+        <span><%= t('experiments.index.restore_option') %></span>
+      <% end %>
+    </li>
+  <% end %>
+  <li class="form-dropdown-item">
+    <div class="form-dropdown-item-info">
+      <small><%= t('experiments.experiment_id') %>: <strong><%= experiment.code %></strong></small>
+    </div>
+  </li>
+</ul>

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

@@ -25,7 +25,12 @@
     <span><%= experiment.code %></span>
   </div>
   <div class="actions actions-cell table-cell">
-    <%= render partial: 'projects/show/experiment_actions_dropdown.html.erb', locals: { experiment: experiment, project: project } %>
+    <div class="dropdown dropdown-async experiment-actions-menu" data-dropdown-url="<%= actions_dropdown_experiment_path(experiment) %>">
+      <button class="btn btn-light dropdown-toggle icon-btn" type="button" id="experimentActionsDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+        <i class="fas fa-ellipsis-h"></i>
+      </button>
+      <ul></ul>
+    </div>
   </div>
   <div class="dates-and-img-container">
     <div class="dates-container">

config/routes.rb

@@ -336,6 +336,7 @@ Rails.application.routes.draw do
       end
       member do
         get 'permissions'
+        get 'actions_dropdown'
         get 'canvas' # Overview/structure for single experiment
         # AJAX-loaded canvas edit mode (from canvas)
         get 'canvas/edit', to: 'canvas#edit'