Add user group members table [SCI-11956]

app/assets/stylesheets/shared/content_pane.scss

@@ -21,6 +21,10 @@
     &.user-groups-table-container {
       height: calc(100vh - var(--content-header-size) - var(--navbar-height) - 72px);
     }
+
+    &.user-group-table-container {
+      height: calc(100vh - var(--content-header-size) - var(--navbar-height) - 104px);
+    }
   }
 
   .content-header {

app/controllers/users/settings/user_group_memberships_controller.rb

@@ -3,11 +3,25 @@
 module Users
   module Settings
     class UserGroupMembershipsController < ApplicationController
-      before_action :load_team, except: :index
+      before_action :load_team
       before_action :load_user_group
       before_action :check_manage_permissions, except: %i(index show)
 
-      def index; end
+      def index
+        memberships = Lists::UserGroupMembershipsService.new(@user_group.user_group_memberships, params).call
+        render json: memberships, each_serializer: Lists::UserGroupMembershipSerializer, user: current_user, meta: pagination_dict(memberships)
+      end
+
+      def actions_toolbar
+        render json: {
+          actions:
+            Toolbars::UserGroupMembershipsService.new(
+              current_user,
+              @user_group,
+              user_group_membership_ids: JSON.parse(params[:items]).pluck('id')
+            ).actions
+        }
+      end
 
       def show; end
 
@@ -27,7 +41,15 @@ module Users
         end
       end
 
-      def destroy; end
+      def destroy_multiple
+        members = @user_group.user_group_memberships.where(id: params[:membership_ids])
+
+        if members.destroy_all
+          render json: { message: :success }, status: :ok
+        else
+          head :unprocessable_entity
+        end
+      end
 
       private
 

app/controllers/users/settings/user_groups_controller.rb

@@ -39,7 +39,9 @@ module Users
         end
       end
 
-      def show; end
+      def show
+        @active_tab = :user_groups
+      end
 
       def create
         @user_group = @team.user_groups.new

app/javascript/packs/vue/user_groups_show.js

@@ -0,0 +1,10 @@
+import { createApp } from 'vue/dist/vue.esm-bundler.js';
+import PerfectScrollbar from 'vue3-perfect-scrollbar';
+import UserGroupShow from '../../vue/user_groups/show.vue';
+import { mountWithTurbolinks } from './helpers/turbolinks.js';
+
+const app = createApp();
+app.component('UserGroupShow', UserGroupShow);
+app.config.globalProperties.i18n = window.I18n;
+app.use(PerfectScrollbar);
+mountWithTurbolinks(app, '#userGroupShow');

app/javascript/vue/user_groups/modal/add_member.vue

@@ -0,0 +1,97 @@
+<template>
+  <div ref="modal" class="modal" tabindex="-1" role="dialog">
+    <div class="modal-dialog" role="document">
+      <form @submit.prevent="submit">
+        <div class="modal-content">
+          <div class="modal-header">
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+              <i class="sn-icon sn-icon-close"></i>
+            </button>
+            <h4 class="modal-title truncate !block">
+              {{ i18n.t('user_groups.show.add_members_modal.title') }}
+            </h4>
+          </div>
+          <div class="modal-body">
+            <div>
+              <label class="sci-label">{{ i18n.t('user_groups.show.add_members_modal.select_members') }}</label>
+              <SelectDropdown
+                :optionsUrl="usersUrl"
+                @change="changeUsers"
+                :withCheckboxes="true"
+                :option-renderer="usersRenderer"
+                :label-renderer="usersRenderer"
+                :multiple="true"
+                :placeholder="i18n.t('user_groups.show.add_members_modal.select_members_placeholder')"
+              />
+            </div>
+          </div>
+          <div class="modal-footer">
+            <button
+              type="button"
+              class="btn btn-secondary"
+              data-dismiss="modal"
+            >
+              {{ i18n.t('general.cancel') }}
+            </button>
+            <button
+              class="btn btn-primary"
+              type="submit"
+              :disabled="submitting || users.length === 0"
+            >
+              {{ i18n.t('user_groups.show.add_members') }}
+            </button>
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import SelectDropdown from '../../shared/select_dropdown.vue';
+import axios from '../../../packs/custom_axios.js';
+import modalMixin from '../../shared/modal_mixin';
+
+export default {
+  name: 'AddMembersModal',
+  props: {
+    usersUrl: String,
+    createUrl: String
+  },
+  mixins: [modalMixin],
+  components: {
+    SelectDropdown,
+  },
+  data() {
+    return {
+      users: [],
+      submitting: false
+    };
+  },
+  methods: {
+    changeUsers(selectedUsers) {
+      this.users = selectedUsers;
+    },
+    async submit() {
+      this.submitting = true;
+
+      await axios.post(this.createUrl, {
+        user_ids: this.users,
+      }).then(() => {
+        HelperModule.flashAlertMsg(this.i18n.t('user_groups.show.add_members_modal.success') , 'success');
+        this.$emit('create');
+      }).catch(() => {
+        HelperModule.flashAlertMsg(this.i18n.t('user_groups.show.add_members_modal.error'), 'danger');
+      });
+      this.submitting = false;
+    },
+    usersRenderer(user) {
+      return `<div class="flex items-center gap-2 truncate">
+                <img class="w-6 h-6 rounded-full" src="${user[2].avatar}">
+                <span title="${user[1]}" class="truncate">${user[1]}</span>
+              </div>`;
+    }
+  }
+};
+</script>

app/javascript/vue/user_groups/modal/create_group.vue

@@ -78,25 +78,11 @@ export default {
   computed: {
     validName() {
       return this.name.length >= GLOBAL_CONSTANTS.NAME_MIN_LENGTH;
-    },
-    modalHeader() {
-      if (this.createUrl) {
-        return this.i18n.t('projects.index.modal_new_project.modal_title');
-      }
-
-      return this.i18n.t('projects.index.modal_edit_project.modal_title', { project: this.project?.name });
-    },
-    submitButtonLabel() {
-      if (this.createUrl) {
-        return this.i18n.t('projects.index.modal_new_project.create');
-      }
-
-      return this.i18n.t('projects.index.modal_edit_project.submit');
     }
   },
   data() {
     return {
-      name: this.project?.name || '',
+      name: '',
       users: [],
       submitting: false
     };

app/javascript/vue/user_groups/show.vue

@@ -0,0 +1,120 @@
+<template>
+  <div class="h-full">
+    <DataTable :columnDefs="columnDefs"
+               tableId="UserGroup"
+               :dataUrl="dataSource"
+               :reloadingTable="reloadingTable"
+               :toolbarActions="toolbarActions"
+               :actionsUrl="actionsUrl"
+               @tableReloaded="reloadingTable = false"
+               @create="addMemberModal = true"
+               @delete="removeMembers"
+      />
+  </div>
+  <AddMemberModal v-if="addMemberModal" :createUrl="createUrl" :usersUrl="usersUrl"
+                   @close="addMemberModal = false" @create="reloadingTable = true; addMemberModal = false" />
+  <DeleteModal
+    :title="i18n.t('user_groups.show.remove_modal.title', { group: groupName })"
+    :description="removeModalDescription"
+    confirmClass="btn btn-danger"
+    :confirmText="i18n.t('user_groups.show.remove_modal.confirm')"
+    ref="removeModal"
+  ></DeleteModal>
+</template>
+
+<script>
+/* global HelperModule */
+
+import axios from '../../packs/custom_axios.js';
+
+import DataTable from '../shared/datatable/table.vue';
+import AddMemberModal from './modal/add_member.vue';
+import DeleteModal from '../shared/confirmation_modal.vue';
+
+
+export default {
+  name: 'UserGroupsTable',
+  components: {
+    DataTable,
+    AddMemberModal,
+    DeleteModal
+  },
+  props: {
+    dataSource: {
+      type: String,
+      required: true
+    },
+    actionsUrl: {
+      type: String,
+      required: true
+    },
+    createUrl: {
+      type: String
+    },
+    usersUrl: {
+      type: String
+    },
+    groupName: {
+      type: String,
+      required: true
+    },
+  },
+  data() {
+    return {
+      addMemberModal: false,
+      reloadingTable: false,
+      removeModalDescription: '',
+      columnDefs: [
+        {
+          field: 'name',
+          headerName: this.i18n.t('user_groups.show.name'),
+          sortable: true,
+        }, {
+          field: 'email',
+          headerName: this.i18n.t('user_groups.show.email'),
+          sortable: true,
+        }, {
+          field: 'created_at',
+          headerName: this.i18n.t('user_groups.show.created_at'),
+          sortable: true
+        }
+      ]
+    };
+  },
+  computed: {
+    toolbarActions() {
+      const left = [];
+      if (this.createUrl) {
+        left.push({
+          name: 'create',
+          icon: 'sn-icon sn-icon-new-task',
+          label: this.i18n.t('user_groups.show.add_members'),
+          type: 'emit',
+          path: this.createUrl,
+          buttonStyle: 'btn btn-primary'
+        });
+      }
+      return {
+        left,
+        right: []
+      };
+    }
+  },
+  methods: {
+    async removeMembers(event, rows) {
+      const description = this.i18n.t('user_groups.show.remove_modal.description_html', { number: rows.length });
+      this.removeModalDescription = description;
+      const ok = await this.$refs.removeModal.show();
+      if (ok) {
+        axios.delete(event.path).then(() => {
+          this.reloadingTable = true;
+          HelperModule.flashAlertMsg(this.i18n.t('user_groups.show.remove_modal.success'), 'success');
+        }).catch(() => {
+          HelperModule.flashAlertMsg(this.i18n.t('user_groups.show.remove_modal.error'), 'danger');
+        });
+      }
+    },
+  }
+};
+
+</script>

app/models/user_group_membership.rb

@@ -1,6 +1,8 @@
 # frozen_string_literal: true
 
 class UserGroupMembership < ApplicationRecord
+  include SearchableModel
+
   belongs_to :user_group
   belongs_to :user
   belongs_to :created_by, class_name: 'User'

app/serializers/lists/user_group_membership_serializer.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module Lists
+  class UserGroupMembershipSerializer < ActiveModel::Serializer
+    include Rails.application.routes.url_helpers
+    include Canaid::Helpers::PermissionsHelper
+
+    attributes :id, :created_at, :name, :email
+
+    def name
+      object.user.full_name
+    end
+
+    def email
+      object.user.email
+    end
+
+    def created_at
+      I18n.l(object.created_at, format: :full_date)
+    end
+  end
+end

app/services/lists/user_group_memberships_service.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module Lists
+  class UserGroupMembershipsService < BaseService
+    private
+
+    def fetch_records
+      @records = @raw_data.joins(:user).includes(:user)
+    end
+
+    def filter_records
+      return unless @params[:search]
+
+      @records = @records.where_attributes_like(
+        ['users.full_name', 'users.email'],
+        @params[:search]
+      )
+    end
+
+    def sortable_columns
+      @sortable_columns ||= {
+        name: 'users.full_name',
+        email: 'users.email',
+        created_at: 'user_group_memberships.created_at'
+      }
+    end
+  end
+end

app/services/toolbars/user_group_memberships_service.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+module Toolbars
+  class UserGroupMembershipsService
+    attr_reader :current_user
+
+    include Canaid::Helpers::PermissionsHelper
+    include Rails.application.routes.url_helpers
+
+    def initialize(current_user, user_group, user_group_membership_ids: [])
+      @current_user = current_user
+      @user_group = user_group
+      @team = user_group.team
+      @memberships = @user_group.user_group_memberships.where(id: user_group_membership_ids)
+
+      @single = @memberships.length == 1
+    end
+
+    def actions
+      return [] if @memberships.none?
+
+      [
+        delete_action
+      ].compact
+    end
+
+    private
+
+    def delete_action
+      return unless can_manage_team?(@team)
+
+      {
+        name: 'delete',
+        label: 'Remove',
+        icon: 'sn-icon sn-icon-delete',
+        path: destroy_multiple_users_settings_team_user_group_user_group_memberships_path(@team, @user_group, membership_ids: @memberships.pluck(:id)),
+        type: :emit
+      }
+    end
+  end
+end

app/views/users/settings/user_groups/show.html.erb

@@ -0,0 +1,28 @@
+<% provide(:head_title, t("users.settings.teams.head_title")) %>
+<% provide(:container_class, "no-second-nav-container") %>
+
+<% content_for :head do %>
+  <meta id="cache-directive" name="turbolinks-cache-control" content="no-cache">
+<% end %>
+
+<div class="content-pane flexible with-grey-background">
+  <%= render partial: 'users/settings/teams/header' %>
+  <div class="flex items-center h-8 gap-4 p-4">
+    <%= link_to users_settings_team_user_groups_path, class: "hover:text-black text-black hover:no-underline" do %>
+      <i class="sn-icon sn-icon-arrow-left"></i>
+    <% end %>
+    <h3 class="m-0">
+      <%= t('user_groups.show.title', group: @user_group.name) %>
+    </h3>
+  </div>
+  <div id="userGroupShow" class="fixed-content-body user-group-table-container">
+    <user-group-show
+      group-name="<%= @user_group.name %>"
+      actions-url="<%= actions_toolbar_users_settings_team_user_group_user_group_memberships_path(@team, @user_group) %>"
+      data-source="<%= users_settings_team_user_group_user_group_memberships_path(@team, @user_group, format: :json) %>"
+      users-url="<%= unassigned_users_users_settings_team_user_groups_path(@team, user_group_id: @user_group.id) %>"
+      create-url="<%= users_settings_team_user_group_user_group_memberships_path(@team, @user_group) if can_manage_team?(@team) %>"
+    />
+  </div>
+</div>
+<%= javascript_include_tag 'vue_user_groups_show' %>

config/initializers/extends.rb

@@ -757,6 +757,7 @@ class Extends
     teams/show
     teams/members
     user_groups/index
+    user_groups/show
   )
 
   DEFAULT_USER_NOTIFICATION_SETTINGS = {

config/locales/en.yml

@@ -4217,6 +4217,25 @@ en:
         confirm: "Delete group"
       toolbar:
         delete: "Delete"
+    show:
+      title: "Group %{group}"
+      add_members: "Add members"
+      name: "Name"
+      email: "Email"
+      created_at: "Added on"
+      remove: "Remove"
+      add_members_modal:
+        title: "Add members"
+        select_members: "Select members"
+        select_members_placeholder: "Search for members"
+        success: "Members added successfully."
+        error: "There was a problem adding members. Please try again."
+      remove_modal:
+        title: "Remove member from %{group}"
+        description_html: "You are about to remove %{number} member(s) from this group. <br><br>Group-based access to content will be removed.<br><br><b>Are you sure you want to remove members from group?</b>"
+        confirm: "Remove"
+        success: "Members removed successfully."
+        error: "There was a problem removing members. Please try again."
   invite_users:
     to_team:
       title: "Invite members to %{team}"

config/routes.rb

@@ -150,7 +150,12 @@ Rails.application.routes.draw do
 
         resources :teams, only: [] do
           resources :user_groups, only: %i(index create update destroy show) do
-            resources :user_group_memberships, only: %i(index create update destroy)
+            resources :user_group_memberships, only: %i(index create update) do
+              collection do
+                delete :destroy_multiple
+                post :actions_toolbar
+              end
+            end
             collection do
               get :unassigned_users
               post :actions_toolbar

config/webpack/webpack.config.js

@@ -75,7 +75,8 @@ const entryList = {
   vue_design_system_table: './app/javascript/packs/vue/design_system/table.js',
   vue_favorites_widget: './app/javascript/packs/vue/favorites_widget.js',
   vue_experiment_description_modal: './app/javascript/packs/vue/experiment_description_modal.js',
-  vue_user_groups_table: './app/javascript/packs/vue/user_groups_table.js'
+  vue_user_groups_table: './app/javascript/packs/vue/user_groups_table.js',
+  vue_user_groups_show: './app/javascript/packs/vue/user_groups_show.js'
 };
 
 // Engine pack loading based on https://github.com/rails/webpacker/issues/348#issuecomment-635480949