From 72a13f028c4da32536577f8ccd3acc76c5bc9671 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Thu, 26 Jan 2023 14:33:47 +0100
Subject: [PATCH 1/4] Add context menu to users

---
 .../enhancement-add-context-menu-to-users     |   6 +
 .../src/components/Users/ContextActions.vue   |  62 ++++++++++
 .../src/components/Users/UsersList.vue        |  85 +++++++++++---
 .../src/mixins/users/delete.ts                |  96 +++++++++++++++
 .../src/mixins/users/edit.ts                  |  27 +++++
 .../src/views/Users.vue                       | 110 +++++-------------
 6 files changed, 293 insertions(+), 93 deletions(-)
 create mode 100644 changelog/unreleased/enhancement-add-context-menu-to-users
 create mode 100644 packages/web-app-admin-settings/src/components/Users/ContextActions.vue
 create mode 100644 packages/web-app-admin-settings/src/mixins/users/delete.ts
 create mode 100644 packages/web-app-admin-settings/src/mixins/users/edit.ts

diff --git a/changelog/unreleased/enhancement-add-context-menu-to-users b/changelog/unreleased/enhancement-add-context-menu-to-users
new file mode 100644
index 00000000000..469b913f235
--- /dev/null
+++ b/changelog/unreleased/enhancement-add-context-menu-to-users
@@ -0,0 +1,6 @@
+Enhancement: Add context menu to users
+
+A context menu has been added to the users management page in the admin settings. It can be toggled via right-click and quick-action.
+
+https://github.com/owncloud/web/pull/8324
+https://github.com/owncloud/web/issues/8323
diff --git a/packages/web-app-admin-settings/src/components/Users/ContextActions.vue b/packages/web-app-admin-settings/src/components/Users/ContextActions.vue
new file mode 100644
index 00000000000..ac5c42e7b78
--- /dev/null
+++ b/packages/web-app-admin-settings/src/components/Users/ContextActions.vue
@@ -0,0 +1,62 @@
+<template>
+  <div>
+    <context-action-menu :menu-sections="menuSections" :items="items" />
+  </div>
+</template>
+
+<script lang="ts">
+import ShowDetails from '../../mixins/showDetails'
+import Delete from '../../mixins/users/delete'
+import Edit from '../../mixins/users/edit'
+import { computed, defineComponent, getCurrentInstance, PropType, unref } from 'vue'
+import ContextActionMenu from 'web-pkg/src/components/ContextActions/ContextActionMenu.vue'
+import { User } from 'web-client/src/generated'
+
+export default defineComponent({
+  name: 'ContextActions',
+  components: { ContextActionMenu },
+  mixins: [Delete, Edit, ShowDetails],
+  props: {
+    items: {
+      type: Array as PropType<User[]>,
+      required: true
+    }
+  },
+  setup(props) {
+    const instance = getCurrentInstance().proxy
+
+    const filterParams = computed(() => ({ resources: props.items }))
+    const menuItemsPrimaryActions = computed(() =>
+      [...instance.$_edit_items, ...instance.$_delete_items].filter((item) =>
+        item.isEnabled(unref(filterParams))
+      )
+    )
+
+    const menuItemsSidebar = computed(() =>
+      [...instance.$_showDetails_items].filter((item) => item.isEnabled(unref(filterParams)))
+    )
+
+    const menuSections = computed(() => {
+      const sections = []
+
+      if (unref(menuItemsPrimaryActions).length) {
+        sections.push({
+          name: 'primaryActions',
+          items: unref(menuItemsPrimaryActions)
+        })
+      }
+      if (unref(menuItemsSidebar).length) {
+        sections.push({
+          name: 'sidebar',
+          items: unref(menuItemsSidebar)
+        })
+      }
+      return sections
+    })
+
+    return {
+      menuSections
+    }
+  }
+})
+</script>
diff --git a/packages/web-app-admin-settings/src/components/Users/UsersList.vue b/packages/web-app-admin-settings/src/components/Users/UsersList.vue
index 4f8cd4a93ef..2a80090d75a 100644
--- a/packages/web-app-admin-settings/src/components/Users/UsersList.vue
+++ b/packages/web-app-admin-settings/src/components/Users/UsersList.vue
@@ -8,7 +8,7 @@
       autocomplete="off"
     />
     <oc-table
-      ref="table"
+      ref="tableRef"
       class="users-table"
       :sort-by="sortBy"
       :sort-dir="sortDir"
@@ -17,7 +17,10 @@
       :highlighted="highlighted"
       :sticky="true"
       :header-position="headerPosition"
+      :hover="true"
       @sort="handleSort"
+      @contextmenuClicked="showContextMenuOnRightClick"
+      @highlight="rowClicked"
     >
       <template #selectHeader>
         <oc-checkbox
@@ -33,11 +36,12 @@
         <oc-checkbox
           class="oc-ml-s"
           size="large"
-          :model-value="selectedUsers"
+          :model-value="isUserSelected(item)"
           :option="item"
           :label="getSelectUserLabel(item)"
           hide-label
           @update:modelValue="$emit('toggleSelectUser', item)"
+          @click.stop
         />
       </template>
       <template #avatar="{ item }">
@@ -62,6 +66,16 @@
         >
           <oc-icon name="pencil" fill-type="line" />
         </oc-button>
+        <context-menu-quick-action
+          ref="contextMenuButtonRef"
+          :item="item"
+          class="users-table-btn-action-dropdown"
+          @quickActionClicked="showContextMenuOnBtnClick($event, item)"
+        >
+          <template #contextMenu>
+            <slot name="contextMenu" :user="item" />
+          </template>
+        </context-menu-quick-action>
       </template>
       <template #footer>
         <div class="oc-text-nowrap oc-text-center oc-width-1-1 oc-my-s">
@@ -74,18 +88,20 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
-
+import { defineComponent, PropType, ref, unref } from 'vue'
 import Fuse from 'fuse.js'
 import Mark from 'mark.js'
-import { eventBus } from 'web-pkg'
+import { displayPositionedDropdown, eventBus } from 'web-pkg'
 import { SideBarEventTopics } from 'web-pkg/src/composables/sideBar'
+import { User } from 'web-client/src/generated'
+import ContextMenuQuickAction from 'web-pkg/src/components/ContextActions/ContextMenuQuickAction.vue'
 
 export default defineComponent({
   name: 'UsersList',
+  components: { ContextMenuQuickAction },
   props: {
     users: {
-      type: Array,
+      type: Array as PropType<User[]>,
       required: true
     },
     roles: {
@@ -93,7 +109,7 @@ export default defineComponent({
       required: true
     },
     selectedUsers: {
-      type: Array,
+      type: Array as PropType<User[]>,
       required: true
     },
     headerPosition: {
@@ -103,25 +119,66 @@ export default defineComponent({
   },
   emits: ['unSelectAllUsers', 'toggleSelectAllUsers', 'toggleSelectUser'],
   setup(props, { emit }) {
-    const showDetails = (user) => {
+    const contextMenuButtonRef = ref(undefined)
+    const isUserSelected = (user) => {
+      return props.selectedUsers.some((s) => s.id === user.id)
+    }
+    const selectUser = (user) => {
       emit('unSelectAllUsers')
       emit('toggleSelectUser', user)
+    }
+
+    const showDetails = (user) => {
+      selectUser(user)
       eventBus.publish(SideBarEventTopics.open)
     }
 
     const showEditPanel = (user) => {
-      emit('unSelectAllUsers')
-      emit('toggleSelectUser', user)
+      selectUser(user)
       eventBus.publish(SideBarEventTopics.openWithPanel, 'EditPanel')
     }
 
     const showGroupAssigmentPanel = (user) => {
-      emit('unSelectAllUsers')
-      emit('toggleSelectUser', user)
+      selectUser(user)
       eventBus.publish(SideBarEventTopics.openWithPanel, 'GroupAssignmentsPanel')
     }
 
-    return { showDetails, showEditPanel, showGroupAssigmentPanel }
+    const rowClicked = (data) => {
+      const user = data[0]
+      selectUser(user)
+    }
+    const showContextMenuOnBtnClick = (data, user) => {
+      const { dropdown, event } = data
+      if (dropdown?.tippy === undefined) {
+        return
+      }
+      if (!isUserSelected(user)) {
+        selectUser(user)
+      }
+      displayPositionedDropdown(dropdown.tippy, event, unref(contextMenuButtonRef))
+    }
+    const showContextMenuOnRightClick = (row, event, user) => {
+      event.preventDefault()
+      const dropdown = row.$el.getElementsByClassName('users-table-btn-action-dropdown')[0]
+      if (dropdown === undefined) {
+        return
+      }
+      if (!isUserSelected(user)) {
+        selectUser(user)
+      }
+      displayPositionedDropdown(dropdown._tippy, event, unref(contextMenuButtonRef))
+    }
+
+    return {
+      showDetails,
+      showEditPanel,
+      showGroupAssigmentPanel,
+      isUserSelected,
+      rowClicked,
+      contextMenuButtonRef,
+      showContextMenuOnBtnClick,
+      showContextMenuOnRightClick
+    }
   },
   data() {
     return {
@@ -209,7 +266,7 @@ export default defineComponent({
   },
   mounted() {
     this.$nextTick(() => {
-      this.markInstance = new Mark(this.$refs.table.$el)
+      this.markInstance = new Mark(this.$refs.tableRef.$el)
     })
   },
   methods: {
diff --git a/packages/web-app-admin-settings/src/mixins/users/delete.ts b/packages/web-app-admin-settings/src/mixins/users/delete.ts
new file mode 100644
index 00000000000..7f26c7e7506
--- /dev/null
+++ b/packages/web-app-admin-settings/src/mixins/users/delete.ts
@@ -0,0 +1,96 @@
+import { mapActions } from 'vuex'
+import { clientService, configurationManager, eventBus } from 'web-pkg'
+
+export default {
+  computed: {
+    $_delete_items() {
+      return [
+        {
+          name: 'delete',
+          icon: 'delete-bin',
+          label: () => {
+            return this.$gettext('Delete')
+          },
+          handler: this.$_delete_trigger,
+          isEnabled: ({ resources }) => {
+            return !!resources.length
+          },
+          componentType: 'button',
+          class: 'oc-users-actions-delete-trigger'
+        }
+      ]
+    }
+  },
+  methods: {
+    ...mapActions(['createModal', 'hideModal', 'showMessage']),
+
+    $_delete_trigger({ resources }) {
+      if (!resources.length) {
+        return
+      }
+
+      const modal = {
+        variation: 'danger',
+        icon: 'alarm-warning',
+        title: this.$ngettext(
+          'Delete user %{user}?',
+          'Delete %{userCount} selected users?',
+          resources.length,
+          {
+            user: resources[0].displayName,
+            userCount: resources.length
+          }
+        ),
+        cancelText: this.$gettext('Cancel'),
+        confirmText: this.$gettext('Delete'),
+        message: this.$ngettext(
+          'Are you sure you want to delete this user?',
+          'Are you sure you want to delete all selected users?',
+          resources.length
+        ),
+        hasInput: false,
+        onCancel: this.hideModal,
+        onConfirm: () => this.$_delete_deleteUsers(resources)
+      }
+
+      this.createModal(modal)
+    },
+
+    async $_delete_deleteUsers(users) {
+      const accessToken = this.$store.getters['runtime/auth/accessToken']
+      const graphClient = clientService.graphAuthenticated(
+        configurationManager.serverUrl,
+        accessToken
+      )
+      const promises = users.map((user) => graphClient.users.deleteUser(user.id))
+
+      try {
+        await Promise.all(promises)
+        this.hideModal()
+        this.showMessage({
+          title: this.$ngettext(
+            'User "%{user}" was deleted successfully',
+            '%{userCount} users were deleted successfully',
+            users.length,
+            { userCount: users.length, user: users[0].displayName },
+            true
+          )
+        })
+        eventBus.publish('app.admin-settings.list.load')
+      } catch (error) {
+        console.error(error)
+        this.hideModal()
+        this.showMessage({
+          title: this.$ngettext(
+            'Failed to delete user "%{user}"',
+            'Failed to delete %{userCount} users',
+            users.length,
+            { userCount: users.length, user: users[0].displayName },
+            true
+          ),
+          status: 'danger'
+        })
+      }
+    }
+  }
+}
diff --git a/packages/web-app-admin-settings/src/mixins/users/edit.ts b/packages/web-app-admin-settings/src/mixins/users/edit.ts
new file mode 100644
index 00000000000..77fd4f9c28e
--- /dev/null
+++ b/packages/web-app-admin-settings/src/mixins/users/edit.ts
@@ -0,0 +1,27 @@
+import { eventBus } from 'web-pkg'
+import { SideBarEventTopics } from 'web-pkg/src/composables/sideBar'
+
+export default {
+  computed: {
+    $_edit_items() {
+      return [
+        {
+          name: 'edit',
+          icon: 'pencil',
+          label: () => this.$gettext('Edit'),
+          handler: this.$_edit_trigger,
+          isEnabled: ({ resources }) => {
+            return resources.length > 0
+          },
+          componentType: 'button',
+          class: 'oc-users-actions-edit-trigger'
+        }
+      ]
+    }
+  },
+  methods: {
+    $_edit_trigger() {
+      eventBus.publish(SideBarEventTopics.openWithPanel, 'EditPanel')
+    }
+  }
+}
diff --git a/packages/web-app-admin-settings/src/views/Users.vue b/packages/web-app-admin-settings/src/views/Users.vue
index a4b8274514c..d857e96068e 100644
--- a/packages/web-app-admin-settings/src/views/Users.vue
+++ b/packages/web-app-admin-settings/src/views/Users.vue
@@ -23,10 +23,11 @@
             >
               <oc-icon name="close" />
             </oc-button>
-            <oc-button appearance="outline" class="oc-ml-m" @click="toggleDeleteUserModal">
-              <oc-icon name="delete-bin" />
-              <span v-text="$gettext('Delete')" />
-            </oc-button>
+            <batch-actions
+              class="oc-ml-s"
+              :selected-items="selectedUsers"
+              :actions="batchActions"
+            />
           </div>
           <div v-else>
             <oc-button variation="primary" appearance="filled" @click="toggleCreateUserModal">
@@ -57,7 +58,11 @@
             @toggleSelectUser="toggleSelectUser"
             @toggleSelectAllUsers="toggleSelectAllUsers"
             @unSelectAllUsers="unselectAllUsers"
-          />
+          >
+            <template #contextMenu>
+              <context-actions :items="selectedUsers" />
+            </template>
+          </UsersList>
         </div>
       </template>
     </app-template>
@@ -67,12 +72,6 @@
       @cancel="toggleCreateUserModal"
       @confirm="createUser"
     />
-    <delete-user-modal
-      v-if="deleteUserModalOpen"
-      :users="selectedUsers"
-      @cancel="toggleDeleteUserModal"
-      @confirm="deleteUsers"
-    />
   </div>
 </template>
 
@@ -81,9 +80,11 @@ import isEqual from 'lodash-es/isEqual'
 import omit from 'lodash-es/omit'
 import UsersList from '../components/Users/UsersList.vue'
 import CreateUserModal from '../components/Users/CreateUserModal.vue'
-import DeleteUserModal from '../components/Users/DeleteUserModal.vue'
+import ContextActions from '../components/Users/ContextActions.vue'
 import DetailsPanel from '../components/Users/SideBar/DetailsPanel.vue'
 import EditPanel from '../components/Users/SideBar/EditPanel.vue'
+import BatchActions from '../components/BatchActions.vue'
+import Delete from '../mixins/users/delete'
 import NoContentMessage from 'web-pkg/src/components/NoContentMessage.vue'
 import { useAccessToken, useStore } from 'web-pkg/src/composables'
 import { defineComponent, ref, onBeforeUnmount, onMounted, unref, watch } from 'vue'
@@ -93,6 +94,8 @@ import { mapActions, mapGetters, mapMutations, mapState } from 'vuex'
 import { useGraphClient } from 'web-pkg/src/composables'
 import AppTemplate from '../components/AppTemplate.vue'
 import { useSideBar } from 'web-pkg/src/composables/sideBar'
+import { computed } from 'vue'
+import { getCurrentInstance } from 'vue-demi'
 
 export default defineComponent({
   name: 'UsersView',
@@ -101,9 +104,12 @@ export default defineComponent({
     UsersList,
     NoContentMessage,
     CreateUserModal,
-    DeleteUserModal
+    BatchActions,
+    ContextActions
   },
+  mixins: [Delete],
   setup() {
+    const instance = getCurrentInstance().proxy as any
     const store = useStore()
     const accessToken = useAccessToken({ store })
     const { graphClient } = useGraphClient()
@@ -114,6 +120,7 @@ export default defineComponent({
     const selectedUsers = ref([])
     const loadedUser = ref(null)
     const sideBarLoading = ref(false)
+    const createUserModalOpen = ref(false)
     const listHeaderPosition = ref(0)
     const template = ref()
     let loadResourcesEventToken
@@ -172,10 +179,18 @@ export default defineComponent({
     const calculateListHeaderPosition = () => {
       listHeaderPosition.value = unref(template)?.$refs?.appBar?.getBoundingClientRect()?.height
     }
+
+    const batchActions = computed(() => {
+      return [...instance.$_delete_items].filter((item) =>
+        item.isEnabled({ resources: unref(selectedUsers) })
+      )
+    })
+
     onMounted(async () => {
       await loadResourcesTask.perform()
       loadResourcesEventToken = eventBus.subscribe('app.admin-settings.list.load', () => {
         loadResourcesTask.perform()
+        selectedUsers.value = []
       })
       userUpdatedEventToken = eventBus.subscribe(
         'app.admin-settings.users.user.updated',
@@ -205,13 +220,9 @@ export default defineComponent({
       loadAdditionalUserDataTask,
       graphClient,
       accessToken,
-      listHeaderPosition
-    }
-  },
-  data: function () {
-    return {
-      createUserModalOpen: false,
-      deleteUserModalOpen: false
+      listHeaderPosition,
+      createUserModalOpen,
+      batchActions
     }
   },
   computed: {
@@ -290,65 +301,6 @@ export default defineComponent({
     toggleCreateUserModal() {
       this.createUserModalOpen = !this.createUserModalOpen
     },
-    toggleDeleteUserModal() {
-      this.deleteUserModalOpen = !this.deleteUserModalOpen
-    },
-    async deleteUsers(usersToDelete) {
-      if (usersToDelete.some((user) => user.id === this.currentUser.uuid)) {
-        this.showMessage({
-          title: this.$gettext('Self deletion is not allowed'),
-          status: 'danger'
-        })
-      }
-
-      usersToDelete = usersToDelete.filter((user) => user.id !== this.currentUser.uuid)
-
-      const promises = usersToDelete.map((user) => this.graphClient.users.deleteUser(user.id))
-
-      if (!promises.length) {
-        return this.toggleDeleteUserModal()
-      }
-
-      try {
-        await Promise.all(promises)
-        this.showMessage({
-          title: this.$gettextInterpolate(
-            this.$ngettext(
-              'User "%{user}" was deleted successfully',
-              '%{userCount} users were deleted successfully',
-              usersToDelete.length
-            ),
-            {
-              userCount: usersToDelete.length,
-              user: usersToDelete[0].onPremisesSamAccountName
-            },
-            true
-          )
-        })
-        this.users = this.users.filter((user) => {
-          return !usersToDelete.find((deletedUser) => user.id === deletedUser.id)
-        })
-        this.selectedUsers = []
-        this.toggleDeleteUserModal()
-      } catch (error) {
-        console.error(error)
-        this.showMessage({
-          title: this.$gettextInterpolate(
-            this.$ngettext(
-              'Failed to delete user "%{user}"',
-              'Failed to delete %{userCount} users',
-              usersToDelete.length
-            ),
-            {
-              userCount: usersToDelete.length,
-              user: usersToDelete.onPremisesSamAccountName
-            },
-            true
-          ),
-          status: 'danger'
-        })
-      }
-    },
     async createUser(user) {
       try {
         const { id: createdUserId } = (await this.graphClient.users.createUser(user))?.data

From 4d8548190d060c66af4cbb208751d57c14b9f5a2 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Thu, 26 Jan 2023 14:35:50 +0100
Subject: [PATCH 2/4] Remove DeleteUserModal component

---
 .../src/components/Users/DeleteUserModal.vue  | 49 -----------------
 .../components/Users/DeleteUserModal.spec.ts  | 53 -------------------
 2 files changed, 102 deletions(-)
 delete mode 100644 packages/web-app-admin-settings/src/components/Users/DeleteUserModal.vue
 delete mode 100644 packages/web-app-admin-settings/tests/unit/components/Users/DeleteUserModal.spec.ts

diff --git a/packages/web-app-admin-settings/src/components/Users/DeleteUserModal.vue b/packages/web-app-admin-settings/src/components/Users/DeleteUserModal.vue
deleted file mode 100644
index 1c8b3a05d13..00000000000
--- a/packages/web-app-admin-settings/src/components/Users/DeleteUserModal.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<template>
-  <oc-modal
-    icon="alarm-warning"
-    :title="title"
-    :message="message"
-    :button-cancel-text="$gettext('Cancel')"
-    :button-confirm-text="$gettext('Delete')"
-    variation="danger"
-    @confirm="$emit('confirm', users)"
-    @cancel="$emit('cancel')"
-  >
-  </oc-modal>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-  name: 'DeleteUserModal',
-  props: {
-    users: {
-      type: Array,
-      required: true
-    }
-  },
-  computed: {
-    title() {
-      return this.$gettextInterpolate(
-        this.$ngettext(
-          'Delete user %{user}?',
-          'Delete %{userCount} selected users?',
-          this.users.length
-        ),
-        {
-          userCount: this.users.length,
-          user: this.users[0].onPremisesSamAccountName
-        }
-      )
-    },
-    message() {
-      return this.$ngettext(
-        'Are you sure you want to delete this user?',
-        'Are you sure you want to delete all selected users?',
-        this.users.length
-      )
-    }
-  }
-})
-</script>
diff --git a/packages/web-app-admin-settings/tests/unit/components/Users/DeleteUserModal.spec.ts b/packages/web-app-admin-settings/tests/unit/components/Users/DeleteUserModal.spec.ts
deleted file mode 100644
index c66df16bcd2..00000000000
--- a/packages/web-app-admin-settings/tests/unit/components/Users/DeleteUserModal.spec.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-import DeleteUserModal from '../../../../src/components/Users/DeleteUserModal.vue'
-import { defaultPlugins, shallowMount } from 'web-test-helpers'
-
-describe('DeleteUserModal', () => {
-  describe('computed method "title"', () => {
-    it('should be singular if one user is given', () => {
-      const { wrapper } = getWrapper({
-        propsData: {
-          users: [{ id: '1', onPremisesSamAccountName: 'Marie' }]
-        }
-      })
-      expect(wrapper.vm.title).toEqual('Delete user Marie?')
-    })
-    it('should be plural if multiple users are given', () => {
-      const { wrapper } = getWrapper({
-        propsData: {
-          users: [{ id: '1' }, { id: '2' }]
-        }
-      })
-      expect(wrapper.vm.title).toEqual('Delete 2 selected users?')
-    })
-  })
-
-  describe('computed method "message"', () => {
-    it('should be singular if one user is given', () => {
-      const { wrapper } = getWrapper({
-        propsData: {
-          users: [{ id: '1', onPremisesSamAccountName: 'Marie' }]
-        }
-      })
-      expect(wrapper.vm.message).toEqual('Are you sure you want to delete this user?')
-    })
-    it('should be plural if multiple users are given', () => {
-      const { wrapper } = getWrapper({
-        propsData: {
-          users: [{ id: '1' }, { id: '2' }]
-        }
-      })
-      expect(wrapper.vm.message).toEqual('Are you sure you want to delete all selected users?')
-    })
-  })
-})
-
-function getWrapper({ propsData = {} } = {}) {
-  return {
-    wrapper: shallowMount(DeleteUserModal, {
-      props: { ...propsData },
-      global: {
-        plugins: [...defaultPlugins()]
-      }
-    })
-  }
-}

From 4eef936e12485610d2340029a6ea32f1919a05be Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Thu, 26 Jan 2023 14:52:48 +0100
Subject: [PATCH 3/4] Add unit tests

---
 .../src/components/Users/UsersList.vue        |  4 +-
 .../unit/components/Users/UsersList.spec.ts   | 67 +++++++++++++---
 .../tests/unit/views/Users.spec.ts            | 80 +++++++++----------
 3 files changed, 95 insertions(+), 56 deletions(-)

diff --git a/packages/web-app-admin-settings/src/components/Users/UsersList.vue b/packages/web-app-admin-settings/src/components/Users/UsersList.vue
index 2a80090d75a..3bd71aa613b 100644
--- a/packages/web-app-admin-settings/src/components/Users/UsersList.vue
+++ b/packages/web-app-admin-settings/src/components/Users/UsersList.vue
@@ -54,14 +54,14 @@
         <oc-button
           v-oc-tooltip="$gettext('Details')"
           appearance="raw"
-          class="oc-mr-xs quick-action-button oc-p-xs"
+          class="oc-mr-xs quick-action-button oc-p-xs users-table-btn-details"
           @click="showDetails(item)"
         >
           <oc-icon name="information" fill-type="line" /></oc-button
         ><oc-button
           v-oc-tooltip="$gettext('Edit')"
           appearance="raw"
-          class="oc-mr-xs quick-action-button oc-p-xs"
+          class="oc-mr-xs quick-action-button oc-p-xs users-table-btn-edit"
           @click="showEditPanel(item)"
         >
           <oc-icon name="pencil" fill-type="line" />
diff --git a/packages/web-app-admin-settings/tests/unit/components/Users/UsersList.spec.ts b/packages/web-app-admin-settings/tests/unit/components/Users/UsersList.spec.ts
index 26ac6fb0561..376dbd6a21b 100644
--- a/packages/web-app-admin-settings/tests/unit/components/Users/UsersList.spec.ts
+++ b/packages/web-app-admin-settings/tests/unit/components/Users/UsersList.spec.ts
@@ -1,21 +1,29 @@
 import UsersList from '../../../../src/components/Users/UsersList.vue'
-import { defaultPlugins, shallowMount } from 'web-test-helpers'
+import { defaultPlugins, mount, shallowMount } from 'web-test-helpers'
+import { displayPositionedDropdown, eventBus } from 'web-pkg'
+import { SideBarEventTopics } from 'web-pkg/src/composables/sideBar'
+
+const getUserMocks = () => [{ id: '1', displayName: 'jan' }]
+jest.mock('web-pkg/src/helpers', () => ({
+  ...jest.requireActual('web-pkg/src/helpers'),
+  displayPositionedDropdown: jest.fn()
+}))
 
 describe('UsersList', () => {
   describe('computed method "allUsersSelected"', () => {
     it('should be true if all users are selected', () => {
       const { wrapper } = getWrapper({
-        propsData: {
-          users: [{ id: '1', displayName: 'jan' }],
-          selectedUsers: [{ id: '1', displayName: 'jan' }]
+        props: {
+          users: getUserMocks(),
+          selectedUsers: getUserMocks()
         }
       })
       expect(wrapper.vm.allUsersSelected).toBeTruthy()
     })
     it('should be false if not every user is selected', () => {
       const { wrapper } = getWrapper({
-        propsData: {
-          users: [{ id: '1', displayName: 'jan' }],
+        props: {
+          users: getUserMocks(),
           selectedUsers: []
         }
       })
@@ -95,11 +103,47 @@ describe('UsersList', () => {
       ).toEqual([])
     })
   })
+
+  it('emits events on row click', () => {
+    const users = getUserMocks()
+    const { wrapper } = getWrapper({ props: { users } })
+    wrapper.vm.rowClicked(users[0])
+    expect(wrapper.emitted('unSelectAllUsers').length).toBeTruthy()
+    expect(wrapper.emitted('toggleSelectUser')).toBeTruthy()
+  })
+  it('should show the context menu on right click', async () => {
+    const users = getUserMocks()
+    const spyDisplayPositionedDropdown = jest.mocked(displayPositionedDropdown)
+    const { wrapper } = getWrapper({ mountType: mount, props: { users } })
+    await wrapper.find(`[data-item-id="${users[0].id}"]`).trigger('contextmenu')
+    expect(spyDisplayPositionedDropdown).toHaveBeenCalledTimes(1)
+  })
+  it('should show the context menu on context menu button click', async () => {
+    const users = getUserMocks()
+    const spyDisplayPositionedDropdown = jest.mocked(displayPositionedDropdown)
+    const { wrapper } = getWrapper({ mountType: mount, props: { users } })
+    await wrapper.find('.users-table-btn-action-dropdown').trigger('click')
+    expect(spyDisplayPositionedDropdown).toHaveBeenCalledTimes(1)
+  })
+  it('should show the user details on details button click', async () => {
+    const users = getUserMocks()
+    const eventBusSpy = jest.spyOn(eventBus, 'publish')
+    const { wrapper } = getWrapper({ mountType: mount, props: { users } })
+    await wrapper.find('.users-table-btn-details').trigger('click')
+    expect(eventBusSpy).toHaveBeenCalledWith(SideBarEventTopics.open)
+  })
+  it('should show the user edit panel on edit button click', async () => {
+    const users = getUserMocks()
+    const eventBusSpy = jest.spyOn(eventBus, 'publish')
+    const { wrapper } = getWrapper({ mountType: mount, props: { users } })
+    await wrapper.find('.users-table-btn-edit').trigger('click')
+    expect(eventBusSpy).toHaveBeenCalledWith(SideBarEventTopics.openWithPanel, 'EditPanel')
+  })
 })
 
-function getWrapper({ propsData = {} } = {}) {
+function getWrapper({ mountType = shallowMount, props = {} } = {}) {
   return {
-    wrapper: shallowMount(UsersList, {
+    wrapper: mountType(UsersList, {
       props: {
         users: [],
         selectedUsers: [],
@@ -122,10 +166,13 @@ function getWrapper({ propsData = {} } = {}) {
           }
         ],
         headerPosition: 0,
-        ...propsData
+        ...props
       },
       global: {
-        plugins: [...defaultPlugins()]
+        plugins: [...defaultPlugins()],
+        stubs: {
+          OcCheckbox: true
+        }
       }
     })
   }
diff --git a/packages/web-app-admin-settings/tests/unit/views/Users.spec.ts b/packages/web-app-admin-settings/tests/unit/views/Users.spec.ts
index 1876eb38629..3dbc6716744 100644
--- a/packages/web-app-admin-settings/tests/unit/views/Users.spec.ts
+++ b/packages/web-app-admin-settings/tests/unit/views/Users.spec.ts
@@ -8,10 +8,13 @@ import {
   defaultComponentMocks,
   defaultPlugins,
   defaultStoreMockOptions,
+  mount,
   shallowMount
 } from 'web-test-helpers'
 import { AxiosResponse } from 'axios'
 
+jest.mock('web-pkg/src/composables/appDefaults')
+
 const getDefaultUser = () => {
   return {
     id: '1',
@@ -258,44 +261,6 @@ describe('Users view', () => {
     })
   })
 
-  describe('method "deleteUsers"', () => {
-    it('should hide the modal and show message on success', async () => {
-      const { wrapper } = getMountedWrapper()
-      const showMessageStub = jest.spyOn(wrapper.vm, 'showMessage')
-      const toggleDeleteUserModalStub = jest.spyOn(wrapper.vm, 'toggleDeleteUserModal')
-      await wrapper.vm.deleteUsers([{ id: '1' }])
-
-      expect(showMessageStub).toHaveBeenCalled()
-      expect(toggleDeleteUserModalStub).toHaveBeenCalledTimes(1)
-    })
-    it('should show message on error', async () => {
-      jest.spyOn(console, 'error').mockImplementation(() => undefined)
-      const graph = getDefaultGraphMock()
-      graph.users.deleteUser.mockImplementation(() => mockAxiosReject())
-      const { wrapper } = getMountedWrapper({ graph })
-      const graphDeleteUserStub = jest.spyOn(graph.users, 'deleteUser')
-      const showMessageStub = jest.spyOn(wrapper.vm, 'showMessage')
-      const toggleDeleteUserModalStub = jest.spyOn(wrapper.vm, 'toggleDeleteUserModal')
-      await wrapper.vm.deleteUsers([{ id: '2' }])
-
-      expect(graphDeleteUserStub).toHaveBeenCalledTimes(1)
-      expect(showMessageStub).toHaveBeenCalled()
-      expect(toggleDeleteUserModalStub).toHaveBeenCalledTimes(0)
-    })
-    it('should show message while user tries to delete own account', async () => {
-      const { wrapper } = getMountedWrapper()
-      const graph = getDefaultGraphMock()
-      const graphDeleteUserStub = jest.spyOn(graph.users, 'deleteUser')
-      const showMessageStub = jest.spyOn(wrapper.vm, 'showMessage')
-      const toggleDeleteUserModalStub = jest.spyOn(wrapper.vm, 'toggleDeleteUserModal')
-      await wrapper.vm.deleteUsers([{ id: '1' }])
-
-      expect(graphDeleteUserStub).toHaveBeenCalledTimes(0)
-      expect(showMessageStub).toHaveBeenCalled()
-      expect(toggleDeleteUserModalStub).toHaveBeenCalled()
-    })
-  })
-
   describe('computed method "sideBarAvailablePanels"', () => {
     it('should contain EditPanel when one user is selected', () => {
       const { wrapper } = getMountedWrapper()
@@ -338,9 +303,31 @@ describe('Users view', () => {
       expect(wrapper.vm.allUsersSelected).toBeFalsy()
     })
   })
+
+  describe('batch actions', () => {
+    it('do not display when no user selected', async () => {
+      const { wrapper } = getMountedWrapper({ mountType: mount })
+      await wrapper.vm.loadResourcesTask.last
+      expect(wrapper.find('batch-actions-stub').exists()).toBeFalsy()
+    })
+    it('display when one user selected', async () => {
+      const { wrapper } = getMountedWrapper({ mountType: mount })
+      await wrapper.vm.loadResourcesTask.last
+      wrapper.vm.toggleSelectUser(getDefaultUser())
+      await wrapper.vm.$nextTick()
+      expect(wrapper.find('batch-actions-stub').exists()).toBeTruthy()
+    })
+    it('display when more than one users selected', async () => {
+      const { wrapper } = getMountedWrapper({ mountType: mount })
+      await wrapper.vm.loadResourcesTask.last
+      wrapper.vm.toggleSelectAllUsers()
+      await wrapper.vm.$nextTick()
+      expect(wrapper.find('batch-actions-stub').exists()).toBeTruthy()
+    })
+  })
 })
 
-function getMountedWrapper({ data = {}, graph = getDefaultGraphMock() } = {}) {
+function getMountedWrapper({ mountType = shallowMount, graph = getDefaultGraphMock() } = {}) {
   const mocks = {
     ...defaultComponentMocks()
   }
@@ -357,13 +344,18 @@ function getMountedWrapper({ data = {}, graph = getDefaultGraphMock() } = {}) {
 
   return {
     mocks,
-    wrapper: shallowMount(Users, {
-      data: () => {
-        return { ...data }
-      },
+    wrapper: mountType(Users, {
       global: {
         plugins: [...defaultPlugins(), store],
-        mocks
+        mocks,
+        stubs: {
+          CreateUserModal: true,
+          AppLoadingSpinner: true,
+          NoContentMessage: true,
+          UsersList: true,
+          OcBreadcrumb: true,
+          BatchActions: true
+        }
       }
     })
   }

From 5069181568c75c6408697634971b7a841fd7db39 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Thu, 26 Jan 2023 14:56:37 +0100
Subject: [PATCH 4/4] Fix imports

---
 .../web-app-admin-settings/src/views/Users.vue   | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/packages/web-app-admin-settings/src/views/Users.vue b/packages/web-app-admin-settings/src/views/Users.vue
index d857e96068e..5b5b0cd4c4b 100644
--- a/packages/web-app-admin-settings/src/views/Users.vue
+++ b/packages/web-app-admin-settings/src/views/Users.vue
@@ -86,16 +86,22 @@ import EditPanel from '../components/Users/SideBar/EditPanel.vue'
 import BatchActions from '../components/BatchActions.vue'
 import Delete from '../mixins/users/delete'
 import NoContentMessage from 'web-pkg/src/components/NoContentMessage.vue'
-import { useAccessToken, useStore } from 'web-pkg/src/composables'
-import { defineComponent, ref, onBeforeUnmount, onMounted, unref, watch } from 'vue'
+import { useAccessToken, useGraphClient, useStore } from 'web-pkg/src/composables'
+import {
+  computed,
+  defineComponent,
+  getCurrentInstance,
+  ref,
+  onBeforeUnmount,
+  onMounted,
+  unref,
+  watch
+} from 'vue'
 import { useTask } from 'vue-concurrency'
 import { eventBus } from 'web-pkg/src/services/eventBus'
 import { mapActions, mapGetters, mapMutations, mapState } from 'vuex'
-import { useGraphClient } from 'web-pkg/src/composables'
 import AppTemplate from '../components/AppTemplate.vue'
 import { useSideBar } from 'web-pkg/src/composables/sideBar'
-import { computed } from 'vue'
-import { getCurrentInstance } from 'vue-demi'
 
 export default defineComponent({
   name: 'UsersView',