From ef9cd21ecf97a0061f1454155f9b72233b77180b Mon Sep 17 00:00:00 2001
From: Martin Artnik <martin@scinote.net>
Date: Fri, 2 Sep 2022 13:47:45 +0200
Subject: [PATCH 1/2] Make project action dropdowns async [SCI-7159]

---
 .../javascripts/shared/async_dropdown.js      |   7 +
 app/controllers/projects_controller.rb        |  17 +-
 .../index/_project_actions_dropdown.html.erb  | 151 +++++++++---------
 .../projects/index/_project_card.html.erb     |   9 +-
 config/routes.rb                              |   1 +
 5 files changed, 104 insertions(+), 81 deletions(-)
 create mode 100644 app/assets/javascripts/shared/async_dropdown.js

diff --git a/app/assets/javascripts/shared/async_dropdown.js b/app/assets/javascripts/shared/async_dropdown.js
new file mode 100644
index 000000000..87711b783
--- /dev/null
+++ b/app/assets/javascripts/shared/async_dropdown.js
@@ -0,0 +1,7 @@
+$(document).on('click', '.dropdown-async button', function(e) {
+  var $parent = $(e.currentTarget).parent();
+
+  $.get($parent.data('dropdown-url'), function(data) {
+    $parent.find('ul').replaceWith(data.html);
+  });
+});
diff --git a/app/controllers/projects_controller.rb b/app/controllers/projects_controller.rb
index 1b608219d..37dbde62a 100644
--- a/app/controllers/projects_controller.rb
+++ b/app/controllers/projects_controller.rb
@@ -12,9 +12,9 @@ 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 +339,19 @@ class ProjectsController < ApplicationController
     render json: { cards_view_type_class: cards_view_type_class(view_type_params) }, status: :ok
   end
 
+  def actions_dropdown
+    respond_to do |format|
+      format.json do
+        render json: {
+          html: render_to_string(
+            partial: 'projects/index/project_actions_dropdown.html.erb',
+            locals: { project: @project, view: @project.current_view_state(current_user) }
+          )
+        }
+      end
+    end
+  end
+
   private
 
   def project_params
diff --git a/app/views/projects/index/_project_actions_dropdown.html.erb b/app/views/projects/index/_project_actions_dropdown.html.erb
index b62e95b49..0912d3e7b 100644
--- a/app/views/projects/index/_project_actions_dropdown.html.erb
+++ b/app/views/projects/index/_project_actions_dropdown.html.erb
@@ -1,84 +1,79 @@
 <% 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 %>
+  <% 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 %>
-    <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),
+    <!-- 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',
-                      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>
+                      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>
-      <!-- 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>
+    <% 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>
-    </ul>
-  </div>
+    <% 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>
 <% end %>
diff --git a/app/views/projects/index/_project_card.html.erb b/app/views/projects/index/_project_card.html.erb
index 2beb628fe..f13ccb631 100644
--- a/app/views/projects/index/_project_card.html.erb
+++ b/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">
diff --git a/config/routes.rb b/config/routes.rb
index e7c808ff0..722c885b1 100644
--- a/config/routes.rb
+++ b/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
 

From a2a5e8c4c8e444d496c29a24d8f6fb39f3c33c15 Mon Sep 17 00:00:00 2001
From: Martin Artnik <martin@scinote.net>
Date: Fri, 2 Sep 2022 16:54:41 +0200
Subject: [PATCH 2/2] Add caching and improve dynamic reload [SCI-7159]

---
 app/assets/javascripts/projects/index.js      |   3 +-
 .../javascripts/shared/async_dropdown.js      |  25 ++-
 app/controllers/projects_controller.rb        |  22 +--
 .../index/_project_actions_dropdown.html.erb  | 154 +++++++++---------
 4 files changed, 108 insertions(+), 96 deletions(-)

diff --git a/app/assets/javascripts/projects/index.js b/app/assets/javascripts/projects/index.js
index ccf83aa2f..1cfb98a2c 100644
--- a/app/assets/javascripts/projects/index.js
+++ b/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');
diff --git a/app/assets/javascripts/shared/async_dropdown.js b/app/assets/javascripts/shared/async_dropdown.js
index 87711b783..d9b6c47c0 100644
--- a/app/assets/javascripts/shared/async_dropdown.js
+++ b/app/assets/javascripts/shared/async_dropdown.js
@@ -1,7 +1,20 @@
-$(document).on('click', '.dropdown-async button', function(e) {
-  var $parent = $(e.currentTarget).parent();
+/* eslint-disable no-unused-vars */
 
-  $.get($parent.data('dropdown-url'), function(data) {
-    $parent.find('ul').replaceWith(data.html);
-  });
-});
+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);
+    });
+  }
+};
diff --git a/app/controllers/projects_controller.rb b/app/controllers/projects_controller.rb
index 37dbde62a..1ff2f57e9 100644
--- a/app/controllers/projects_controller.rb
+++ b/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 actions_dropdown)
+  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 actions_dropdown)
+  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
@@ -340,15 +342,13 @@ class ProjectsController < ApplicationController
   end
 
   def actions_dropdown
-    respond_to do |format|
-      format.json do
-        render json: {
-          html: render_to_string(
-            partial: 'projects/index/project_actions_dropdown.html.erb',
-            locals: { project: @project, view: @project.current_view_state(current_user) }
-          )
-        }
-      end
+    if stale?(@project)
+      render json: {
+        html: render_to_string(
+          partial: 'projects/index/project_actions_dropdown.html.erb',
+          locals: { project: @project }
+        )
+      }
     end
   end
 
diff --git a/app/views/projects/index/_project_actions_dropdown.html.erb b/app/views/projects/index/_project_actions_dropdown.html.erb
index 0912d3e7b..7987fb71d 100644
--- a/app/views/projects/index/_project_actions_dropdown.html.erb
+++ b/app/views/projects/index/_project_actions_dropdown.html.erb
@@ -1,79 +1,77 @@
-<% cache [current_user, project] do %>
-  <% 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.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>
+<% 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>