UX changes for permission modal [SCI-7619]

app/assets/javascripts/access_permissions/user_assignments.js

@@ -45,6 +45,12 @@
       $('.user-assignments-modal').replaceWith(data.html);
       $('.user-assignments-modal').modal('show');
     });
+
+    $(document).on('click', '.user-assignment-dropdown .user-role-selector', function() {
+      let roleId = $(this).data('role-id');
+      $(this).closest('.dropdown').find('#user_assignment_user_role_id').val(roleId);
+      $(this).closest('form').trigger('submit');
+    });
   }
 
   $(document).one('turbolinks:load', initNewUserAssignmentFormListener);

app/assets/stylesheets/access_permissions/access_modal.scss

@@ -1,7 +1,6 @@
 #user_assignments_modal {
   .modal-body {
-    max-height: 400px;
+    min-height: calc(100vh - 200px);
-    min-height: 250px;
     overflow: auto;
     padding-top: 0;
   }
@@ -33,6 +32,16 @@
 
   .user-assignment-controls {
     margin-left: auto;
+
+    .caret {
+      margin-left: 20px;
+    }
+  }
+
+  .user-assignment-dropdown {
+    a {
+      padding: 8px 16px;
+    }
   }
 
   .global-avatar-container {

app/controllers/access_permissions/experiments_controller.rb

@@ -21,18 +21,15 @@ module AccessPermissions
 
     def update
       user_id = permitted_update_params[:user_id]
-      @user_assignment = UserAssignment.find_by(
+      @user_assignment = @experiment.user_assignments.find_by(user_id: user_id, team: current_team)
-        assignable: @experiment,
-        user_id: user_id
-      )
 
       if permitted_update_params[:user_role_id] == 'reset'
-        @user_assignment.update(
+        @user_assignment.update!(
-          user_role_id: @project.user_assignments.find_by(user_id: user_id).user_role_id,
+          user_role_id: @project.user_assignments.find_by(user_id: user_id, team: current_team).user_role_id,
           assigned: :automatically
         )
       else
-        @user_assignment.update(
+        @user_assignment.update!(
           user_role_id: permitted_update_params[:user_role_id],
           assigned: :manually
         )

app/controllers/access_permissions/my_modules_controller.rb

@@ -22,18 +22,15 @@ module AccessPermissions
 
     def update
       user_id = permitted_update_params[:user_id]
-      @user_assignment = UserAssignment.find_by(
+      @user_assignment = @my_module.user_assignments.find_by(user_id: user_id, team: current_team)
-        assignable: @my_module,
-        user_id: user_id
-      )
 
       if permitted_update_params[:user_role_id] == 'reset'
-        @user_assignment.update(
+        @user_assignment.update!(
-          user_role_id: @experiment.user_assignments.find_by(user_id: user_id).user_role_id,
+          user_role_id: @experiment.user_assignments.find_by(user_id: user_id, team: current_team).user_role_id,
           assigned: :automatically
         )
       else
-        @user_assignment.update(
+        @user_assignment.update!(
           user_role_id: permitted_update_params[:user_role_id],
           assigned: :manually
         )

app/controllers/access_permissions/projects_controller.rb

@@ -8,7 +8,10 @@ module AccessPermissions
     before_action :available_users, only: %i(new create)
 
     def new
-      @user_assignment = UserAssignment.new(assignable: @protocol, assigned_by: current_user)
+      @user_assignment = @project.user_assignments.new(
+        assigned_by: current_user,
+        team: current_team
+      )
 
       respond_to do |format|
         format.json
@@ -28,7 +31,10 @@ module AccessPermissions
     end
 
     def update
-      @user_assignment = UserAssignment.find_by(user_id: permitted_update_params[:user_id], assignable: @project)
+      @user_assignment = @project.user_assignments.find_by(
+        user_id: permitted_update_params[:user_id],
+        team: current_team
+      )
       @user_assignment.update!(permitted_update_params)
 
       log_activity(:change_user_role_on_project, @user_assignment)
@@ -48,7 +54,8 @@ module AccessPermissions
 
           user_assignment = UserAssignment.find_or_initialize_by(
             assignable: @project,
-            user_id: user_assignment_params[:user_id]
+            user_id: user_assignment_params[:user_id],
+            team: current_team
           )
 
           user_assignment.update!(
@@ -75,7 +82,7 @@ module AccessPermissions
 
     def destroy
       user = @project.assigned_users.find(params[:user_id])
-      user_assignment = @project.user_assignments.find_by(user_id: params[:user_id])
+      user_assignment = @project.user_assignments.find_by(user: user, team: current_team)
 
       if @project.visible?
         user_assignment.update!(

app/controllers/access_permissions/protocols_controller.rb

@@ -7,7 +7,11 @@ module AccessPermissions
     before_action :check_manage_permissions, except: %i(show)
 
     def new
-      @user_assignment = UserAssignment.new(assignable: @protocol, assigned_by: current_user)
+      @user_assignment = UserAssignment.new(
+        assignable: @protocol,
+        assigned_by: current_user,
+        team: current_team
+      )
 
       respond_to do |format|
         format.json
@@ -27,7 +31,10 @@ module AccessPermissions
     end
 
     def update
-      @user_assignment = UserAssignment.find_by(user_id: permitted_update_params[:user_id], assignable: @protocol)
+      @user_assignment = @protocol.user_assignments.find_by(
+        user_id: permitted_update_params[:user_id],
+        team: current_team
+      )
       @user_assignment.update(permitted_update_params)
       respond_to do |format|
         format.json do
@@ -43,6 +50,7 @@ module AccessPermissions
 
           user_assignment = UserAssignment.new(user_assignment_params)
           user_assignment.assignable = @protocol
+          user_assignment.team = current_team
           user_assignment.assigned_by = current_user
           user_assignment.save!
         end
@@ -61,7 +69,7 @@ module AccessPermissions
 
     def destroy
       user = @protocol.assigned_users.find(params[:user_id])
-      user_assignment = @protocol.user_assignments.find_by(user_id: params[:user_id])
+      user_assignment = @protocol.user_assignments.find_by(user: user, team: current_team)
       respond_to do |format|
         if user_assignment.destroy
           format.json do

app/views/access_permissions/experiments/modals/_show_modal.html.erb

@@ -1,7 +1,7 @@
 <% # frozen_string_literal: true %>
 
 <div class="modal fade experiment-assignments-modal" tabindex="-1" role="dialog" data-action="modal-close">
-  <div class="modal-dialog modal-md" role="document">
+  <div class="modal-dialog modal-lg" role="document">
     <div class="modal-content" id="user_assignments_modal">
       <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>

app/views/access_permissions/my_modules/modals/_show_modal.html.erb

@@ -1,7 +1,7 @@
 <% # frozen_string_literal: true %>
 
 <div class="modal fade my-module-assignments-modal" tabindex="-1" role="dialog">
-  <div class="modal-dialog modal-md" role="document">
+  <div class="modal-dialog modal-lg" role="document">
     <div class="modal-content" id="user_assignments_modal">
       <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>

app/views/access_permissions/partials/_default_public_user_role_form.html.erb

@@ -21,7 +21,5 @@
         <%= f.select :default_public_user_role_id, options_for_select(user_roles_collection, selected: project.default_public_user_role_id), {}, class: 'form-control selectpicker', title: t('user_assignment.change_project_role'), data: { 'selected-text-format' => 'static' } %>
       <% end %>
     </div>
-    <div class="user-assignment-remove">
-    </div>
   </div>
 <% end %>

app/views/access_permissions/partials/_member_field.html.erb

@@ -1,11 +1,11 @@
 <% # frozen_string_literal: true %>
 
 <%
-  object_assignment = UserAssignment.find_by(user_id: user.id, assignable: object)
+  object_assignment = object.user_assignments.find_by(user_id: user.id, team: current_team)
   item_id = dom_id(user, :assignment_member)
 %>
 
-<%= form_with(model: object_assignment, url: update_path, method: :put, remote: true, html: { class: 'row member-item', id: item_id, data: { action: 'replace-form autosave-form', object_type: :assignment_member } }) do |f| %>
+<%= form_with(model: object_assignment, url: update_path, method: :put, remote: true, html: { class: 'member-item', id: item_id, data: { action: 'replace-form autosave-form', object_type: :assignment_member } }) do |f| %>
   <%= f.hidden_field :user_id, value: f.object.user.id %>
     <div class="user-assignment-info">
       <div class="global-avatar-container">
@@ -13,25 +13,34 @@
       </div>
       <div>
         <%= current_assignee_name(user) %>
-        <br>
-        <small class="text-muted"><%= user_assignment_resource_role_name(user, object) %></small>
       </div>
     </div>
     <div class="user-assignment-controls">
       <% unless defined?(with_inherit) && current_user == user %>
-        <div class="user-assignment-role">
+        <div class="dropdown pull-right">
-          <%= f.select :user_role_id, options_for_select(user_roles_collection(with_inherit: defined? with_inherit), selected: f.object.user_role.id), {}, class: 'form-control selectpicker', title: t('user_assignment.change_role'), data: { 'selected-text-format' => 'static' } %>
+          <button class="btn btn-light" type="button" id="userAccess_<%= user.id %>" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+            <%= f.object.user_role.name %>
+            <span class="caret"></span>
+          </button>
+          <%= f.hidden_field :user_role_id, value: f.object.user_role.id %>
+          <ul class="dropdown-menu dropdown-menu-right user-assignment-dropdown" aria-labelledby="userAccess_<%= user.id %>">
+            <% user_roles_collection(with_inherit: defined? with_inherit).each do |role| %>
+              <li>
+                <a href="#" data-turbolinks="false" class="user-role-selector" data-role-id="<%= role[1] %>">
+                  <%= role[0] %>
+                </a>
+              </li>
+            <% end %>
+            <% if defined?(delete_path) && !object_assignment.last_assignable_owner?  %>
+              <li role="separator" class="divider" data-hook="support-dropdown-separator"></li>
+              <li>
+                <%= link_to delete_path, remote: true, method: :delete, data: { action: 'remote-destroy', target: "##{item_id}" } do %>
+                  <%= t('access_permissions.remove_access') %>
+                <% end %>
+              </li>
+            <% end %>
+          </ul>
         </div>
-        <% if defined? delete_path %>
-          <div class="user-assignment-remove">
-            <% unless object_assignment.last_assignable_owner? %>
-              <%= link_to delete_path, remote: true, method: :delete, class: 'btn btn-secondary', data: { action: 'remote-destroy', target: "##{item_id}" } do %>
-                <span class="fas fa-times"></span>
-                <%= t 'general.remove' %>
-              <% end %>
-            <% end %>
-          </div>
-        <% end %>
       <% end %>
     </div>
 <% end %>

app/views/access_permissions/partials/_user_assignment.html.erb

@@ -1,14 +1,15 @@
 <% # frozen_string_literal: true %>
 
-<div class="row member-item">
+<div class="member-item">
   <div class="user-assignment-info">
     <div class="global-avatar-container">
       <%= image_tag avatar_path(user, :icon_small), title: current_assignee_name(user), class: 'img-circle pull-left' %>
     </div>
     <div>
       <%= current_assignee_name(user) %>
-      <br>
-      <small class="text-muted"><%= user_assignment_resource_role_name(user, resource) %></small>
     </div>
   </div>
+  <div class="user-assignment-controls">
+    <%= resource.user_assignments.find_by(user: user, team: current_team).user_role.name %>
+  </div>
 </div>

app/views/access_permissions/projects/modals/_edit_modal.html.erb

@@ -22,7 +22,7 @@
       <div class="modal-footer">
         <%= link_to new_resource_path, class: 'btn btn-default pull-left', data: { action: 'swap-remote-container', target: '#user_assignments_modal' } do %>
           <i class="fas fa-plus"></i>
-          <%= t '.new_resource_assignments', resource: project.model_name.human.downcase %>
+          <%= t('access_permissions.grant_access') %>
         <% end %>
       </div>
     </div>

app/views/access_permissions/projects/modals/_show_modal.html.erb

@@ -1,7 +1,7 @@
 <% # frozen_string_literal: true %>
 
 <div class="modal fade project-assignments-modal" tabindex="-1" role="dialog" data-action="modal-close">
-  <div class="modal-dialog modal-md" role="document">
+  <div class="modal-dialog modal-lg" role="document">
     <div class="modal-content" id="user_assignments_modal">
       <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>

app/views/access_permissions/protocols/modals/_edit_modal.html.erb

@@ -21,7 +21,7 @@
       <div class="modal-footer">
         <%= link_to new_resource_path, class: 'btn btn-default pull-left', data: { action: 'swap-remote-container', target: '#user_assignments_modal' } do %>
           <i class="fas fa-plus"></i>
-          <%= t('.new_resource_assignments', resource: protocol.model_name.human.downcase) %>
+          <%= t('access_permissions.grant_access') %>
         <% end %>
       </div>
     </div>

app/views/access_permissions/protocols/modals/_show_modal.html.erb

@@ -1,7 +1,7 @@
 <% # frozen_string_literal: true %>
 
 <div class="modal fade protocol-assignments-modal" tabindex="-1" role="dialog" data-action="modal-close">
-  <div class="modal-dialog modal-md" role="document">
+  <div class="modal-dialog modal-lg" role="document">
     <div class="modal-content" id="user_assignments_modal">
       <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>

app/views/access_permissions/protocols/protocol_member.json.jbuilder

@@ -5,8 +5,9 @@ json.form controller.render_to_string(
   formats: [:html],
   locals: {
     user: @user_assignment.user,
-    protocol: @protocol,
+    object: @protocol,
-    update_path: access_permissions_protocol_path(@protocol)
+    update_path: access_permissions_protocol_path(@protocol),
+    delete_path: access_permissions_protocol_path(@protocol, user_id: @user_assignment.user_id)
   },
   layout: false
 )

config/locales/en.yml

@@ -3054,6 +3054,8 @@ en:
   access_permissions:
     everyone_else: "Everyone else at %{team_name}"
     reset: "The inherited role will be applied"
+    remove_access: "Remove access"
+    grant_access: "Grant access"
     create:
       success:
         one: "You have successfully granted access to %{count} member to the project."
@@ -3102,18 +3104,14 @@ en:
       modals:
         show_modal:
           title: "Access to %{resource_name}"
-          new_resource_assignments: "Grant new access to %{resource}"
         edit_modal:
           title: "Manage access for %{resource_name}"
-          new_resource_assignments: "Grant new access to %{resource}"
     protocols:
       modals:
         show_modal:
           title: "Access to %{resource_name}"
-          new_resource_assignments: "Grant new access to %{resource}"
         edit_modal:
           title: "Manage access for %{resource_name}"
-          new_resource_assignments: "Grant new access to %{resource}"
     experiments:
       modals:
         show_modal: