Connect users modal to projects index page

app/assets/javascripts/projects/index.js

@@ -198,25 +198,7 @@
   function initManageUsersModal() {
     // Reload users tab HTML element when modal is closed
     projectActionsModal.off('hide.bs.modal').on('hide.bs.modal', function() {
-      var projectEl = $('#' + $(this).attr('data-project-id'));
+      refreshCurrentView();
-
-      // Load HTML to refresh users list
-      $.ajax({
-        url: projectEl.attr('data-project-users-tab-url'),
-        type: 'GET',
-        dataType: 'json',
-        success: function(data) {
-          projectEl.find('#users-' + projectEl.attr('id')).html(data.html);
-          CounterBadge.updateCounterBadge(
-            data.counter, data.project_id, 'users'
-          );
-          initUsersEditLink(projectEl);
-          projectsChanged = true;
-        },
-        error: function() {
-          // TODO
-        }
-      });
     });
 
     // Remove modal content when modal window is closed.
@@ -231,8 +213,6 @@
   global.initUsersEditLink = function($el) {
     $el.find('.manage-users-link').off()
       .on('ajax:before', function() {
-        var projectId = $(this).closest('.panel-default').attr('id');
-        projectActionsModal.attr('data-project-id', projectId);
         projectActionsModal.modal('show');
       })
       .on('ajax:success', function(e, data) {
@@ -439,6 +419,7 @@
     initFormSubmitLinks($('.project-card'));
     initEditProjectButton($('.project-card'));
     initArchiveRestoreButton($('.project-card'));
+    initUsersEditLink($('.project-card'));
 
     $('#cards-wrapper').on('click', '.folder-card-selector', function() {
       let folderCard = $(this).closest('.folder-card');

app/assets/stylesheets/projects.scss

@@ -877,6 +877,14 @@ li.module-hover {
 
         }
 
+        .manage-users-link {
+          color: $color-silver-chalice;
+
+          &:hover {
+            text-decoration: none;
+          }
+        }
+
         &.folder-card {
           text-align: center;
 
@@ -983,10 +991,6 @@ li.module-hover {
               height: 2em;
               justify-content: center;
               width: 2em;
-
-              fas.fa-plus {
-                color: $color-silver-chalice;
-              }
             }
           }
         }

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

@@ -13,7 +13,7 @@
     </a>
   </div>
   <div class="actions actions-cell">
-    <%= render partial: "projects/index/project_actions_dropdown.html.erb", locals: { project: project, view: 'cards' } %>
+    <%= render partial: 'projects/index/project_actions_dropdown.html.erb', locals: { project: project, view: 'cards' } %>
   </div>
 
   <div class="data-row start-date-row">
@@ -21,7 +21,6 @@
       <span class="card-label"><%= t('projects.index.card.start_date') %></span>
       <span class="value"> <%= l(project.created_at, format: :full_with_comma) %></span>
     </div>
-
   </div>
 
   <div class="data-row visibility-cell">
@@ -45,9 +44,14 @@
         </span>
       <% end %>
 
-      <span class="new-user">
+      <%= link_to project_users_edit_path(project),
-        <i class="fas fa-plus"></i>
+                  class: 'manage-users-link',
-      </span>
+                  remote: true,
+                  data: { 'view-mode': 'active' } do %>
+        <span class="new-user">
+          <i class="fas fa-plus"></i>
+        </span>
+      <% end %>
     </div>
   </div>
 </div>