Merge pull request #4403 from artoscinote/ma_SCI_7159

Make project action dropdowns async [SCI-7159]

app/assets/javascripts/projects/index.js

@@ -7,7 +7,7 @@
 // - refresh project users tab after manage user modal is closed
 // - refactor view handling using library, ex. backbone.js
 
-/* global HelperModule dropdownSelector Sidebar Turbolinks filterDropdown InfiniteScroll GLOBAL_CONSTANTS */
+/* global HelperModule dropdownSelector Sidebar Turbolinks filterDropdown InfiniteScroll AsyncDropdown GLOBAL_CONSTANTS */
 /* eslint-disable no-use-before-define */
 
 var ProjectsIndex = (function() {
@@ -655,6 +655,7 @@ var ProjectsIndex = (function() {
     initProjectsFilters();
     initArchiveRestoreButton();
     loadCardsView();
+    AsyncDropdown.init($(projectsWrapper));
 
     $(projectsWrapper).on('click', '.folder-card-selector', function() {
       let folderCard = $(this).closest('.folder-card');

app/assets/javascripts/shared/async_dropdown.js

@@ -0,0 +1,20 @@
+/* eslint-disable no-unused-vars */
+
+var AsyncDropdown = {
+  init: function($container) {
+    $container.on('click', '.dropdown-async button', function(e) {
+      var $parent = $(e.currentTarget).parent();
+
+      if ($parent.data('async-dropdown-initialized')) return;
+
+      $parent.on('show.bs.dropdown', function() {
+        $parent.find('ul').empty().hide();
+        $.get($parent.data('dropdown-url'), function(data) {
+          $parent.find('ul').replaceWith(data.html);
+        });
+      });
+
+      $parent.data('async-dropdown-initialized', true);
+    });
+  }
+};

app/controllers/projects_controller.rb

@@ -12,9 +12,11 @@ class ProjectsController < ApplicationController
   helper_method :current_folder
 
   before_action :switch_team_with_param, only: :index
-  before_action :load_vars, only: %i(show edit update notifications sidebar experiments_cards view_type)
+  before_action :load_vars, only: %i(show edit update notifications
+                                     sidebar experiments_cards view_type actions_dropdown)
   before_action :load_current_folder, only: %i(index cards new show)
-  before_action :check_view_permissions, only: %i(show notifications sidebar experiments_cards view_type)
+  before_action :check_view_permissions, only: %i(show notifications sidebar
+                                                  experiments_cards view_type actions_dropdown)
   before_action :check_create_permissions, only: %i(new create)
   before_action :check_manage_permissions, only: :edit
   before_action :load_exp_sort_var, only: :show
@@ -339,6 +341,17 @@ class ProjectsController < ApplicationController
     render json: { cards_view_type_class: cards_view_type_class(view_type_params) }, status: :ok
   end
 
+  def actions_dropdown
+    if stale?(@project)
+      render json: {
+        html: render_to_string(
+          partial: 'projects/index/project_actions_dropdown.html.erb',
+          locals: { project: @project }
+        )
+      }
+    end
+  end
+
   private
 
   def project_params

app/views/projects/index/_project_actions_dropdown.html.erb

@@ -1,84 +1,77 @@
-<% cache [current_user, project] do %>
-  <div class="dropdown project-actions-menu <%= 'new-comments' if has_unseen_comments?(project) %>">
-    <button class="btn btn-light dropdown-toggle icon-btn" type="button" id="projectActionsDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
-      <i class="fas fa-ellipsis-h"></i>
-    </button>
-    <% project_form = nil %>
-    <%= form_for project, format: :json, method: :put, remote: true, html: { id: "edit-project-#{view}-form-#{project.id}" } do |f| %>
-      <% project_form = f %>
-      <%= f.hidden_field :archived, value: !project.archived %>
-    <% end %>
-    <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="projectActionsDropdown">
-      <!-- Edit project -->
-      <% if project.active? && can_manage_project?(project) %>
-        <li>
-          <a href="<%= edit_project_path(project, format: :json) %>"
-             class="edit-project-btn"
-             data-action="edit"
-             data-remote="true">
-            <i class="fas fa-pen"></i>
-            <span><%= t('projects.index.edit_option') %></span>
-          </a>
-        </li>
-      <% end %>
-      <!-- Archive/restore project -->
-      <% if project.active? && can_archive_project?(project) %>
-        <li class="form-dropdown-item">
-          <%= button_to(project_path(project, format: :json),
-                        method: :put,
-                        remote: true,
-                        class: 'btn btn-light',
-                        form_class: 'project-archive-restore-form',
-                        data: { confirm: t('projects.index.archive_confirm') },
-                        params: { project: { archived: true } }) do %>
-            <i class="fas fa-archive"></i>
-            <span><%= t('projects.index.archive_option') %></span>
-          <% end %>
-        </li>
-      <% elsif project.archived? && can_restore_project?(project) %>
-        <li class="form-dropdown-item">
-          <%= button_to(project_path(project, format: :json),
-                        method: :put,
-                        remote: true,
-                        class: 'btn btn-light',
-                        form_class: 'project-archive-restore-form',
-                        params: { project: { archived: false } }) do %>
-            <i class="fas fa-undo"></i>
-            <span><%= t('projects.index.restore_option') %></span>
-          <% end %>
-        </li>
-      <% end %>
-      <!-- Project members access -->
-      <% if can_read_project?(project) %>
-        <li class="form-dropdown-item">
-          <%= link_to can_manage_project_users?(project) ? edit_access_permissions_project_path(project) : access_permissions_project_path(project),
-                      class: 'btn btn-light',
-                      data: { action: 'remote-modal'} do %>
-            <i class="fas fa-door-open"></i>
-            <%= I18n.t('projects.index.project_members_access') %>
-          <% end  %>
-        </li>
-      <% end %>
-      <!-- Show comments -->
-      <li>
-        <a href="#"
-           class="open-comments-sidebar"
-           data-turbolinks="false"
-           data-object-type="Project"
-           data-object-id="<%= project.id %>">
-          <i class="fas fa-comment"></i>
-          <span id="comment-count-<%= project.id %>">
-            <%= t('projects.index.comments_option', comments_count: project.comment_count) %>
-          </span>
-        </a>
-      </li>
-      <!-- Open activities -->
-      <li>
-        <a href="/global_activities?<%= Activity.url_search_query({ subjects: { Project: [project] } }) %>">
-          <i class="fas fa-list"></i>
-          <span><%= t('projects.index.activities_option') %></span>
-        </a>
-      </li>
-    </ul>
-  </div>
+<% project_form = nil %>
+<%= form_for project, format: :json, method: :put, remote: true, html: { id: "edit-project-dropdown-form-#{project.id}" } do |f| %>
+  <% project_form = f %>
+  <%= f.hidden_field :archived, value: !project.archived %>
 <% end %>
+<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="projectActionsDropdown">
+  <!-- Edit project -->
+  <% if project.active? && can_manage_project?(project) %>
+    <li>
+      <a href="<%= edit_project_path(project, format: :json) %>"
+          class="edit-project-btn"
+          data-action="edit"
+          data-remote="true">
+        <i class="fas fa-pen"></i>
+        <span><%= t('projects.index.edit_option') %></span>
+      </a>
+    </li>
+  <% end %>
+  <!-- Archive/restore project -->
+  <% if project.active? && can_archive_project?(project) %>
+    <li class="form-dropdown-item">
+      <%= button_to(project_path(project, format: :json),
+                    method: :put,
+                    remote: true,
+                    class: 'btn btn-light',
+                    form_class: 'project-archive-restore-form',
+                    data: { confirm: t('projects.index.archive_confirm') },
+                    params: { project: { archived: true } }) do %>
+        <i class="fas fa-archive"></i>
+        <span><%= t('projects.index.archive_option') %></span>
+      <% end %>
+    </li>
+  <% elsif project.archived? && can_restore_project?(project) %>
+    <li class="form-dropdown-item">
+      <%= button_to(project_path(project, format: :json),
+                    method: :put,
+                    remote: true,
+                    class: 'btn btn-light',
+                    form_class: 'project-archive-restore-form',
+                    params: { project: { archived: false } }) do %>
+        <i class="fas fa-undo"></i>
+        <span><%= t('projects.index.restore_option') %></span>
+      <% end %>
+    </li>
+  <% end %>
+  <!-- Project members access -->
+  <% if can_read_project?(project) %>
+    <li class="form-dropdown-item">
+      <%= link_to can_manage_project_users?(project) ? edit_access_permissions_project_path(project) : access_permissions_project_path(project),
+                  class: 'btn btn-light',
+                  data: { action: 'remote-modal'} do %>
+        <i class="fas fa-door-open"></i>
+        <%= I18n.t('projects.index.project_members_access') %>
+      <% end  %>
+    </li>
+  <% end %>
+  <!-- Show comments -->
+  <li>
+    <a href="#"
+        class="open-comments-sidebar"
+        data-turbolinks="false"
+        data-object-type="Project"
+        data-object-id="<%= project.id %>">
+      <i class="fas fa-comment"></i>
+      <span id="comment-count-<%= project.id %>">
+        <%= t('projects.index.comments_option', comments_count: project.comments.count) %>
+      </span>
+    </a>
+  </li>
+  <!-- Open activities -->
+  <li>
+    <a href="/global_activities?<%= Activity.url_search_query({ subjects: { Project: [project] } }) %>">
+      <i class="fas fa-list"></i>
+      <span><%= t('projects.index.activities_option') %></span>
+    </a>
+  </li>
+</ul>

app/views/projects/index/_project_card.html.erb

@@ -27,7 +27,14 @@
     <% end %>
   </div>
   <div class="actions actions-cell table-cell">
-    <%= render partial: 'projects/index/project_actions_dropdown.html.erb', locals: { project: project, view: 'cards' } %>
+    <div
+      class="dropdown dropdown-async project-actions-menu  <%= 'new-comments' if has_unseen_comments?(project) %>"
+      data-dropdown-url="<%= actions_dropdown_project_path(project) %>">
+      <button class="btn btn-light dropdown-toggle icon-btn" type="button" id="projectActionsDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+        <i class="fas fa-ellipsis-h"></i>
+      </button>
+      <ul></ul>
+    </div>
   </div>
 
   <div class="data-row start-date-cell table-cell">

config/routes.rb

@@ -302,6 +302,7 @@ Rails.application.routes.draw do
         get 'notifications'
         get 'experiments_cards'
         get 'sidebar'
+        get 'actions_dropdown'
         put 'view_type'
       end