Migrate group edit to Bootstrap

Instead of using a tokenfield in a new screen it has been added:
- A delete icon for each row in the table, for deleting a user.
- An "Add user" link, for adding a user using a modal with an
autocomplete box.

This way we don't use tokenfield, that is currently not maintained.

src/api/app/controllers/webui/groups_controller.rb

@@ -1,6 +1,8 @@
 class Webui::GroupsController < Webui::WebuiController
+  include Webui2::GroupsController
+
   before_action :require_login, except: [:show, :autocomplete]
-  before_action :set_group, only: [:show, :update, :edit]
+  before_action :set_group, only: [:show, :update, :edit, :delete]
   after_action :verify_authorized, except: [:show, :autocomplete]
 
   def index
@@ -35,6 +37,7 @@ def create
   end
 
   def update
+    return if switch_to_webui2
     authorize @group, :update?
 
     if @group.replace_members(group_params[:members])
@@ -50,6 +53,10 @@ def autocomplete
     render json: groups || []
   end
 
+  def delete
+    return if switch_to_webui2
+  end
+
   private
 
   def group_params

src/api/app/controllers/webui2/groups_controller.rb

@@ -0,0 +1,32 @@
+module Webui2::GroupsController
+  def webui2_update
+    authorize @group, :update?
+
+    user = User.find_by_login(webui2_group_params[:userid])
+    if user && @group.add_user(user)
+      flash[:success] = "User '#{user}' successfully added to group '#{@group}'."
+      redirect_to group_show_path(title: @group) + '#tab-group-members'
+    else
+      redirect_back(fallback_location: root_path, error: "Group couldn't be updated: #{@group.errors.full_messages.to_sentence}")
+    end
+  end
+
+  def webui2_delete
+    authorize @group, :update?
+
+    user = User.find_by_login(params[:user])
+    if user && @group.remove_user(user)
+      flash[:success] = "User '#{user}' successfully removed from group '#{@group}'."
+      redirect_to group_show_path(title: @group) + '#tab-group-members'
+    else
+      redirect_back(fallback_location: root_path,
+                    error: "User '#{user}' couldn't be removed from '#{@group}': #{@group.errors.full_messages.to_sentence}")
+    end
+  end
+
+  private
+
+  def webui2_group_params
+    params.require(:group).permit(:title, :userid)
+  end
+end

src/api/app/views/webui2/webui/groups/_add_user_modal.html.haml

@@ -0,0 +1,34 @@
+.modal.fade#add-user-modal{ tabindex: -1, role: 'dialog', aria: { labelledby: 'edit-modal-label', hidden: true } }
+  .modal-dialog.modal-dialog-centered{ role: 'document' }
+    .modal-content
+      = form_for(@group, url: group_update_path + '#tab-group-members', method: :post) do
+        .modal-header
+          %h5.modal-title#edit-modal-label Add User
+        .modal-body
+          .form-group#add-user-modal-input
+            .input-group
+              .input-group-prepend
+                %span.input-group-text#add-user-search-icon
+                  %i.fa.fa-search
+                  %i.fas.fa-spinner.fa-spin.d-none
+                = text_field_tag 'group[userid]', '', required: true, placeholder: 'Type to autocomplete...', class: 'form-control'
+        .modal-footer
+          = render partial: 'webui2/shared/dialog_action_buttons'
+
+= content_for :ready_function do
+  :plain
+    $('#group_userid').autocomplete({
+      appendTo: '#add-user-modal-input',
+      source: '#{url_for controller: 'user', action: 'autocomplete'}',
+      search: function(event, ui) {
+        var icon = $('#add-user-search-icon i:first-child');
+        icon.addClass('d-none');
+        icon.next().removeClass('d-none');
+      },
+      response: function(event, ui) {
+        var icon = $('#add-user-search-icon i:first-child');
+        icon.removeClass('d-none');
+        icon.next().addClass('d-none');
+      },
+      minLength: 2
+    });

src/api/app/views/webui2/webui/groups/_breadcrumb_items.html.haml

@@ -1,5 +1,11 @@
 = render partial: 'webui/main/breadcrumb_items'
 %li.breadcrumb-item
   = link_to 'Groups', groups_path
-%li.breadcrumb-item.active{ 'aria-current' => 'page' }
-  = @group
+- if current_page?(group_show_path)
+  %li.breadcrumb-item.active{ 'aria-current' => 'page' }
+    = @group
+- else
+  %li.breadcrumb-item
+    = link_to @group, group_show_path(@group)
+  %li.breadcrumb-item.active{ 'aria-current' => 'page' }
+    Edit

src/api/app/views/webui2/webui/groups/_remove_user_modal.html.haml

@@ -0,0 +1,13 @@
+.modal.fade{ id: "delete-group-user-#{user.id}-modal", tabindex: -1, role: 'dialog', aria: { labelledby: 'delete-modal-label', hidden: true } }
+  .modal-dialog.modal-dialog-centered{ role: 'document' }
+    .modal-content
+      .modal-header
+        %h5.modal-title
+          Remove user '#{user}'?
+      .modal-body
+        %p Please confirm removing user '#{user}' from group '#{group}'
+        = form_tag(group_user_delete_path(group, user), method: :delete) do
+          .modal-footer
+            %button.btn.btn-sm.btn-outline-secondary.px-4{ data: { dismiss: 'modal' } }
+              Cancel
+            = submit_tag('Delete', class: 'btn btn-sm btn-danger px-4')

src/api/app/views/webui2/webui/groups/show.html.haml

@@ -1,7 +1,7 @@
 - @pagetitle = "Group #{@group}"
 
 .card
-  %div
+  .bg-light
     %ul.nav.nav-tabs.pt-2.px-3.flex-nowrap.collapsible{ 'role': 'tablist' }
       %li.nav-item
         %a.active.nav-link.text-nowrap#reviews-in-tab{ aria: { controls: 'reviews-in', selected: 'true' },
@@ -20,38 +20,50 @@
         %a.nav-link.dropdown-toggle{ href: '#', 'data-toggle': 'dropdown', 'role': 'button', 'aria-expanded': 'false', 'aria-haspopup': 'true' }
         .dropdown-menu.dropdown-menu-right
 
-  .card-body.tab-content
-    .tab-pane.show.active#reviews-in{ aria: { controls: 'reviews-in' }, role: 'tabpanel' }
-      %h3 Incoming Reviews
-      = render(partial: 'webui2/shared/requests_table', locals: { id: 'reviews_in_table', source_url: group_requests_path(@group) })
+  .card-body
+    .tab-content
+      .tab-pane.show.active#reviews-in{ aria: { controls: 'reviews-in' }, role: 'tabpanel' }
+        %h3 Incoming Reviews
+        = render(partial: 'webui2/shared/requests_table', locals: { id: 'reviews_in_table', source_url: group_requests_path(@group) })
 
-    .tab-pane#requests-in{ aria: { controls: 'requests-in' }, role: 'tabpanel' }
-      %h3 Incoming Requests
-      = render(partial: 'webui2/shared/requests_table', locals: { id: 'requests_in_table', source_url: group_requests_path(@group) })
+      .tab-pane#requests-in{ aria: { controls: 'requests-in' }, role: 'tabpanel' }
+        %h3 Incoming Requests
+        = render(partial: 'webui2/shared/requests_table', locals: { id: 'requests_in_table', source_url: group_requests_path(@group) })
 
-    .tab-pane#all-requests{ aria: { controls: 'all-requests' }, role: 'tabpanel' }
-      %h3 All Requests
-      = render(partial: 'webui2/shared/requests_table', locals: { id: 'all_requests_table', source_url: group_requests_path(@group) })
+      .tab-pane#all-requests{ aria: { controls: 'all-requests' }, role: 'tabpanel' }
+        %h3 All Requests
+        = render(partial: 'webui2/shared/requests_table', locals: { id: 'all_requests_table', source_url: group_requests_path(@group) })
 
-    .tab-pane#group-members{ aria: { controls: 'group-members' }, role: 'tabpanel' }
-      %h3 Group Members
-      .obs-dataTable
-        %table.table.table-striped.table-bordered.w-100#group-members-table
-          %thead
-            %tr
-              %th Login Name
-          %tbody
-            - if @group.users.any?
-              - @group.users.each do |user|
-                %tr
-                  %td= link_to(user, user_show_path(user))
-            - else
+      .tab-pane#group-members{ aria: { controls: 'group-members' }, role: 'tabpanel' }
+        %h3 Group Members
+        .obs-dataTable
+          %table.table.table-striped.table-bordered.w-100#group-members-table
+            %thead
               %tr
-                %td This group does not contain users.
-        - if User.current.is_admin? || @group.group_maintainers.where(user: User.current).exists?
-          = link_to group_edit_title_path(title: @group) do
-            %i.fas.fa-edit
-            Edit group members
+                %th Login Name
+                %th
+            %tbody
+              - if @group.users.any?
+                - @group.users.each do |user|
+                  %tr
+                    %td= link_to(user, user_show_path(user))
+                    %td.text-nowrap
+                      = link_to('#', data: { toggle: 'modal', target: "#delete-group-user-#{user.id}-modal" }) do
+                        %i.fas.fa-times-circle.text-danger{ title: "Remove user '#{user}' from '#{@group}' group." }
+                      = render(partial: 'remove_user_modal', locals: { group: @group, user: user })
+              - else
+                %tr
+                  %td{ colspan: 2 } This group does not contain users.
+          - if policy(@group).update?
+            = link_to('#', class: 'nav-link', data: { toggle: 'modal', target: '#add-user-modal' }, id: 'add-user') do
+              %i.fas.fa-plus-circle.text-primary
+              Add User
+            = render(partial: 'add_user_modal', locals: { group: @group })
 
 = content_for :ready_function do
-  initializeDataTable('#group-members-table');
+  :plain
+    var hash = document.location.hash;
+    if (hash) {
+      $('.nav-tabs a[href="' + hash.replace('tab-', '') + '"]').tab('show');
+    }
+    initializeDataTable('#group-members-table');

src/api/config/routes.rb

@@ -414,8 +414,9 @@ def self.public_or_about_path?(request)
       get 'group/new' => :new
       post 'group/create' => :create
       get 'group/edit/:title' => :edit, constraints: { title: /[^\/]*/ }, as: :group_edit_title
-      post 'group/update/:title' => :update, constraints: { title: /[^\/]*/ }
+      post 'group/update/:title' => :update, constraints: { title: /[^\/]*/ }, as: :group_update
       get 'group/autocomplete' => :autocomplete
+      delete 'group/:title/delete/:user' => :delete, constraints: { title: /[^\/]*/ }, as: :group_user_delete
     end
 
     resources :comments, constraints: cons, only: [:create, :destroy], controller: 'webui/comments'