From 579b2ff1cbcbaa3b825c5a7a90176c00142adfad Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Wed, 25 Jan 2023 14:02:56 +0100
Subject: [PATCH 1/5] Add context menu to groups

---
 .../enhancement-add-context-menu-to-groups    |   6 +
 .../src/components/Groups/BatchActions.vue    |  71 +++++++++++
 .../src/components/Groups/ContextActions.vue  |  59 ++++++++++
 .../components/Groups/DeleteGroupModal.vue    |  50 --------
 .../src/components/Groups/GroupsList.vue      | 109 +++++++++++++++--
 .../src/mixins/groups/delete.ts               | 111 ++++++++++++++++++
 .../src/views/Groups.vue                      |  81 +++----------
 .../components/Groups/BatchActions.spec.ts    |  70 +++++++++++
 .../components/Groups/ContextActions.spec.ts  |  55 +++++++++
 .../Groups/DeleteGroupModal.spec.ts           |  53 ---------
 .../unit/components/Groups/GroupsList.spec.ts |  61 ++++++++--
 .../tests/unit/views/Groups.spec.ts           |  82 ++++---------
 12 files changed, 562 insertions(+), 246 deletions(-)
 create mode 100644 changelog/unreleased/enhancement-add-context-menu-to-groups
 create mode 100644 packages/web-app-admin-settings/src/components/Groups/BatchActions.vue
 create mode 100644 packages/web-app-admin-settings/src/components/Groups/ContextActions.vue
 delete mode 100644 packages/web-app-admin-settings/src/components/Groups/DeleteGroupModal.vue
 create mode 100644 packages/web-app-admin-settings/src/mixins/groups/delete.ts
 create mode 100644 packages/web-app-admin-settings/tests/unit/components/Groups/BatchActions.spec.ts
 create mode 100644 packages/web-app-admin-settings/tests/unit/components/Groups/ContextActions.spec.ts
 delete mode 100644 packages/web-app-admin-settings/tests/unit/components/Groups/DeleteGroupModal.spec.ts

diff --git a/changelog/unreleased/enhancement-add-context-menu-to-groups b/changelog/unreleased/enhancement-add-context-menu-to-groups
new file mode 100644
index 00000000000..3230883adcc
--- /dev/null
+++ b/changelog/unreleased/enhancement-add-context-menu-to-groups
@@ -0,0 +1,6 @@
+Enhancement: Add context menu to groups
+
+A context menu has been added to the groups management page in the admin settings. It can be toggled via right-click and quick-action.
+
+https://github.com/owncloud/web/pull/8317
+https://github.com/owncloud/web/issues/8316
diff --git a/packages/web-app-admin-settings/src/components/Groups/BatchActions.vue b/packages/web-app-admin-settings/src/components/Groups/BatchActions.vue
new file mode 100644
index 00000000000..cf19bbf8747
--- /dev/null
+++ b/packages/web-app-admin-settings/src/components/Groups/BatchActions.vue
@@ -0,0 +1,71 @@
+<template>
+  <div>
+    <oc-list
+      id="oc-groups-appbar-batch-actions"
+      :class="{ 'oc-groups-appbar-batch-actions-squashed': limitedScreenSpace }"
+    >
+      <action-menu-item
+        v-for="(action, index) in actions"
+        :key="`action-${index}`"
+        :action="action"
+        :items="selectedGroups"
+        appearance="outline"
+        class="batch-actions oc-mr-s"
+        :show-tooltip="limitedScreenSpace"
+      />
+    </oc-list>
+  </div>
+</template>
+
+<script lang="ts">
+import ActionMenuItem from 'web-pkg/src/components/ContextActions/ActionMenuItem.vue'
+import Delete from '../../mixins/groups/delete'
+import { computed, defineComponent, getCurrentInstance, PropType } from 'vue'
+import { SpaceResource } from 'web-client'
+
+export default defineComponent({
+  name: 'ActionsPanel',
+  components: { ActionMenuItem },
+  mixins: [Delete],
+  props: {
+    selectedGroups: {
+      type: Array as PropType<Array<SpaceResource>>,
+      required: true
+    },
+    limitedScreenSpace: {
+      type: Boolean,
+      default: false,
+      required: false
+    }
+  },
+  setup(props) {
+    const instance = getCurrentInstance().proxy as any
+    const actions = computed(() => {
+      return [...instance.$_delete_items].filter((item) =>
+        item.isEnabled({ resources: props.selectedGroups })
+      )
+    })
+    return { actions }
+  }
+})
+</script>
+
+<style lang="scss">
+#oc-groups-appbar-batch-actions {
+  display: block;
+  li {
+    float: left !important;
+  }
+  @media only screen and (min-width: 1200px) {
+    li {
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+    align-items: center;
+    display: flex;
+  }
+}
+.oc-groups-appbar-batch-actions-squashed .oc-files-context-action-label {
+  display: none;
+}
+</style>
diff --git a/packages/web-app-admin-settings/src/components/Groups/ContextActions.vue b/packages/web-app-admin-settings/src/components/Groups/ContextActions.vue
new file mode 100644
index 00000000000..33d179c9fa6
--- /dev/null
+++ b/packages/web-app-admin-settings/src/components/Groups/ContextActions.vue
@@ -0,0 +1,59 @@
+<template>
+  <div>
+    <context-action-menu :menu-sections="menuSections" :items="items" />
+  </div>
+</template>
+
+<script lang="ts">
+import ShowDetails from '../../mixins/showDetails'
+import Delete from '../../mixins/groups/delete'
+import { computed, defineComponent, getCurrentInstance, PropType, unref } from 'vue'
+import ContextActionMenu from 'web-pkg/src/components/ContextActions/ContextActionMenu.vue'
+import { Group } from 'web-client/src/generated'
+
+export default defineComponent({
+  name: 'ContextActions',
+  components: { ContextActionMenu },
+  mixins: [Delete, ShowDetails],
+  props: {
+    items: {
+      type: Array as PropType<Group[]>,
+      required: true
+    }
+  },
+  setup(props) {
+    const instance = getCurrentInstance().proxy
+
+    const filterParams = computed(() => ({ resources: props.items }))
+    const menuItemsPrimaryActions = computed(() =>
+      [...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/Groups/DeleteGroupModal.vue b/packages/web-app-admin-settings/src/components/Groups/DeleteGroupModal.vue
deleted file mode 100644
index 28087cdbb97..00000000000
--- a/packages/web-app-admin-settings/src/components/Groups/DeleteGroupModal.vue
+++ /dev/null
@@ -1,50 +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', groups)"
-    @cancel="$emit('cancel')"
-  >
-  </oc-modal>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-  name: 'DeleteGroupModal',
-  props: {
-    groups: {
-      type: Array,
-      required: true
-    }
-  },
-  emits: ['cancel', 'confirm'],
-  computed: {
-    title() {
-      return this.$gettextInterpolate(
-        this.$ngettext(
-          'Delete group %{group}?',
-          'Delete %{groupCount} selected groups?',
-          this.groups.length
-        ),
-        {
-          group: this.groups[0].displayName,
-          groupCount: this.groups.length
-        }
-      )
-    },
-    message() {
-      return this.$ngettext(
-        'Are you sure you want to delete this group?',
-        'Are you sure you want to delete all selected groups?',
-        this.groups.length
-      )
-    }
-  }
-})
-</script>
diff --git a/packages/web-app-admin-settings/src/components/Groups/GroupsList.vue b/packages/web-app-admin-settings/src/components/Groups/GroupsList.vue
index 50d54f43fa9..ab8b501afd6 100644
--- a/packages/web-app-admin-settings/src/components/Groups/GroupsList.vue
+++ b/packages/web-app-admin-settings/src/components/Groups/GroupsList.vue
@@ -8,7 +8,7 @@
       autocomplete="off"
     />
     <oc-table
-      ref="table"
+      ref="tableRef"
       :sort-by="sortBy"
       :sort-dir="sortDir"
       :fields="fields"
@@ -16,7 +16,10 @@
       :highlighted="highlighted"
       :sticky="true"
       :header-position="headerPosition"
+      :hover="true"
       @sort="handleSort"
+      @contextmenuClicked="showContextMenuOnRightClick"
+      @highlight="rowClicked"
     >
       <template #selectHeader>
         <oc-checkbox
@@ -32,11 +35,12 @@
         <oc-checkbox
           class="oc-ml-s"
           size="large"
-          :model-value="selectedGroups"
+          :model-value="isGroupSelected(rowData.item)"
           :option="rowData.item"
           :label="getSelectGroupLabel(rowData.item)"
           hide-label
           @update:modelValue="$emit('toggleSelectGroup', rowData.item)"
+          @click.stop
         />
       </template>
       <template #avatar="rowData">
@@ -47,6 +51,7 @@
       </template>
       <template #actions="{ item }">
         <oc-button
+          :id="`group-details-trigger-${resourceDomSelector(item)}`"
           v-oc-tooltip="$gettext('Details')"
           appearance="raw"
           class="oc-mr-xs quick-action-button oc-p-xs"
@@ -54,6 +59,36 @@
         >
           <oc-icon name="information" fill-type="line" />
         </oc-button>
+        <oc-button
+          :id="`context-menu-trigger-${resourceDomSelector(item)}`"
+          ref="contextMenuButtonRef"
+          v-oc-tooltip="contextMenuLabel"
+          :aria-label="contextMenuLabel"
+          class="groups-table-btn-action-dropdown"
+          appearance="raw"
+          @click.stop.prevent="
+            showContextMenuOnBtnClick(
+              `context-menu-drop-ref-${resourceDomSelector(item)}`,
+              $event,
+              item
+            )
+          "
+        >
+          <oc-icon name="more-2" />
+        </oc-button>
+        <oc-drop
+          :ref="`context-menu-drop-ref-${resourceDomSelector(item)}`"
+          :drop-id="`context-menu-drop-${resourceDomSelector(item)}`"
+          :toggle="`#context-menu-trigger-${resourceDomSelector(item)}`"
+          :popper-options="popperOptions"
+          mode="click"
+          close-on-click
+          padding-size="small"
+          @click.stop.prevent
+        >
+          <!-- @slot Add context actions that open in a dropdown when clicking on the "three dots" button -->
+          <slot name="contextMenu" :group="item" />
+        </oc-drop>
         <!-- Editing groups is currently not supported by backend
       <oc-button v-oc-tooltip="$gettext('Edit')" class="oc-ml-s" @click="$emit('clickEdit', item)">
         <oc-icon size="small" name="pencil" />
@@ -71,21 +106,24 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { computed, defineComponent, PropType, ref, unref } from 'vue'
 import Fuse from 'fuse.js'
 import Mark from 'mark.js'
-import { eventBus } from 'web-pkg'
+import { displayPositionedDropdown, eventBus, popperOptions as defaultPopperOptions } from 'web-pkg'
 import { SideBarEventTopics } from 'web-pkg/src/composables/sideBar'
+import { extractDomSelector } from 'web-client/src/helpers'
+import { Group } from 'web-client/src/generated'
+import { useGettext } from 'vue3-gettext'
 
 export default defineComponent({
   name: 'GroupsList',
   props: {
     groups: {
-      type: Array,
+      type: Array as PropType<Group[]>,
       required: true
     },
     selectedGroups: {
-      type: Array,
+      type: Array as PropType<Group[]>,
       required: true
     },
     headerPosition: {
@@ -95,13 +133,66 @@ export default defineComponent({
   },
   emits: ['toggleSelectAllGroups', 'unSelectAllGroups', 'toggleSelectGroup'],
   setup(props, { emit }) {
-    const showDetails = (group) => {
+    const { $gettext } = useGettext()
+    const resourceDomSelector = (group) => extractDomSelector(group.id)
+    const groupRefs = {}
+    for (const group of props.groups) {
+      groupRefs[`context-menu-drop-ref-${resourceDomSelector(group)}`] = ref(undefined)
+    }
+
+    const contextMenuButtonRef = ref(undefined)
+    const contextMenuLabel = computed(() => $gettext('Show context menu'))
+
+    const isGroupSelected = (group) => {
+      return props.selectedGroups.some((s) => s.id === group.id)
+    }
+    const selectGroup = (group) => {
       emit('unSelectAllGroups')
       emit('toggleSelectGroup', group)
+    }
+    const showDetails = (group) => {
+      selectGroup(group)
       eventBus.publish(SideBarEventTopics.open)
     }
+    const rowClicked = (data) => {
+      const group = data[0]
+      selectGroup(group)
+    }
+    const popperOptions = computed(() => defaultPopperOptions)
+    const showContextMenuOnBtnClick = (id, event, group) => {
+      const dropdown = unref(unref(groupRefs)[id]).tippy
+      if (dropdown === undefined) {
+        return
+      }
+      if (!isGroupSelected(group)) {
+        selectGroup(group)
+      }
+      displayPositionedDropdown(dropdown, event, unref(contextMenuButtonRef))
+    }
+    const showContextMenuOnRightClick = (row, event, group) => {
+      event.preventDefault()
+      const dropdown = row.$el.getElementsByClassName('groups-table-btn-action-dropdown')[0]
+      if (dropdown === undefined) {
+        return
+      }
+      if (!isGroupSelected(group)) {
+        selectGroup(group)
+      }
+      displayPositionedDropdown(dropdown._tippy, event, unref(contextMenuButtonRef))
+    }
 
-    return { showDetails }
+    return {
+      ...groupRefs,
+      resourceDomSelector,
+      showDetails,
+      rowClicked,
+      isGroupSelected,
+      popperOptions,
+      showContextMenuOnBtnClick,
+      showContextMenuOnRightClick,
+      contextMenuButtonRef,
+      contextMenuLabel
+    }
   },
   data() {
     return {
@@ -181,7 +272,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/groups/delete.ts b/packages/web-app-admin-settings/src/mixins/groups/delete.ts
new file mode 100644
index 00000000000..6e21a1ba97c
--- /dev/null
+++ b/packages/web-app-admin-settings/src/mixins/groups/delete.ts
@@ -0,0 +1,111 @@
+import { mapActions, mapGetters, mapMutations, mapState } from 'vuex'
+import {clientService, eventBus} from "web-pkg";
+
+export default {
+  computed: {
+    ...mapGetters(['configuration']),
+    ...mapState(['user']),
+
+    $_delete_items() {
+      return [
+        {
+          name: 'delete',
+          icon: 'close-circle',
+          label: () => {
+            return this.$gettext('Delete')
+          },
+          handler: this.$_delete_trigger,
+          isEnabled: ({ resources }) => {
+            return !!resources.length
+          },
+          componentType: 'button',
+          class: 'oc-groups-actions-delete-trigger'
+        }
+      ]
+    }
+  },
+  methods: {
+    ...mapActions([
+      'createModal',
+      'hideModal',
+      'setModalInputErrorMessage',
+      'showMessage',
+      'toggleModalConfirmButton'
+    ]),
+    ...mapMutations('Files', ['REMOVE_FILES']),
+    ...mapMutations('runtime/spaces', ['REMOVE_SPACE']),
+
+    $_delete_trigger({ resources }) {
+      if (!resources.length) {
+        return
+      }
+
+      const modal = {
+        variation: 'danger',
+        icon: 'alarm-warning',
+        title: this.$ngettext(
+          'Delete group %{group}?',
+          'Delete %{groupCount} selected groups?',
+          resources.length,
+          {
+            group: resources[0].displayName,
+            groupCount: resources.length
+          }
+        ),
+        cancelText: this.$gettext('Cancel'),
+        confirmText: this.$gettext('Delete'),
+        message: this.$ngettext(
+          'Are you sure you want to delete this group?',
+          'Are you sure you want to delete all selected groups?',
+          resources.length
+        ),
+        hasInput: false,
+        onCancel: this.hideModal,
+        onConfirm: () => this.$_delete_deleteGroups(resources)
+      }
+
+      this.createModal(modal)
+    },
+
+    async $_delete_deleteGroups(groups) {
+      console.log('groups', groups)
+      const accessToken = this.$store.getters['runtime/auth/accessToken']
+      const graphClient = clientService.graphAuthenticated(this.configuration.server, accessToken)
+      const promises = groups.map((group) => graphClient.groups.deleteGroup(group.id))
+
+      try {
+        await Promise.all(promises)
+        this.hideModal()
+        this.showMessage({
+          title: this.$ngettext(
+            'Group "%{group}" was deleted successfully',
+            '%{groupCount} groups were deleted successfully',
+            groups.length,
+            {
+              groupCount: groups.length,
+              group: groups[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 group "%{group}"',
+            'Failed to delete %{groupCount} groups',
+            groups.length,
+            {
+              groupCount: groups.length,
+              group: groups[0].displayName
+            },
+            true
+          ),
+          status: 'danger'
+        })
+      }
+    }
+  }
+}
diff --git a/packages/web-app-admin-settings/src/views/Groups.vue b/packages/web-app-admin-settings/src/views/Groups.vue
index d8c7131324d..21023baefb1 100644
--- a/packages/web-app-admin-settings/src/views/Groups.vue
+++ b/packages/web-app-admin-settings/src/views/Groups.vue
@@ -22,10 +22,7 @@
             >
               <oc-icon name="close" />
             </oc-button>
-            <oc-button appearance="outline" class="oc-ml-m" @click="toggleDeleteGroupModal">
-              <oc-icon name="delete-bin" />
-              <span v-text="$gettext('Delete')" />
-            </oc-button>
+            <batch-actions class="oc-ml-s" :selected-groups="selectedGroups" />
           </div>
           <div v-else>
             <oc-button variation="primary" appearance="filled" @click="toggleCreateGroupModal">
@@ -54,7 +51,11 @@
             @toggleSelectGroup="toggleSelectGroup"
             @toggleSelectAllGroups="toggleSelectAllGroups"
             @unSelectAllGroups="unselectAllGroups"
-          />
+          >
+            <template #contextMenu>
+              <context-actions :items="selectedGroups" />
+            </template>
+          </GroupsList>
         </div>
       </template>
     </app-template>
@@ -64,19 +65,14 @@
       @cancel="toggleCreateGroupModal"
       @confirm="createGroup"
     />
-    <delete-group-modal
-      v-if="deleteGroupModalOpen"
-      :groups="selectedGroups"
-      @cancel="toggleDeleteGroupModal"
-      @confirm="deleteGroups"
-    />
   </div>
 </template>
 
 <script lang="ts">
 import GroupsList from '../components/Groups/GroupsList.vue'
 import CreateGroupModal from '../components/Groups/CreateGroupModal.vue'
-import DeleteGroupModal from '../components/Groups/DeleteGroupModal.vue'
+import ContextActions from '../components/Groups/ContextActions.vue'
+import BatchActions from '../components/Groups/BatchActions.vue'
 import NoContentMessage from 'web-pkg/src/components/NoContentMessage.vue'
 import { defineComponent, ref, unref, onBeforeUnmount, onMounted } from 'vue'
 import { useTask } from 'vue-concurrency'
@@ -94,12 +90,15 @@ export default defineComponent({
     GroupsList,
     NoContentMessage,
     CreateGroupModal,
-    DeleteGroupModal
+    BatchActions,
+    ContextActions
   },
   setup() {
     const groups = ref([])
     let loadResourcesEventToken
     const template = ref()
+    const selectedGroups = ref([])
+    const createGroupModalOpen = ref(false)
     const listHeaderPosition = ref(0)
     const { graphClient } = useGraphClient()
 
@@ -119,6 +118,7 @@ export default defineComponent({
       await loadResourcesTask.perform()
       loadResourcesEventToken = eventBus.subscribe('app.admin-settings.list.load', () => {
         loadResourcesTask.perform()
+        selectedGroups.value = []
       })
       calculateListHeaderPosition()
       window.addEventListener('resize', calculateListHeaderPosition)
@@ -131,19 +131,14 @@ export default defineComponent({
     return {
       ...useSideBar(),
       groups,
+      selectedGroups,
+      createGroupModalOpen,
       template,
       loadResourcesTask,
       graphClient,
       listHeaderPosition
     }
   },
-  data: function () {
-    return {
-      selectedGroups: [],
-      createGroupModalOpen: false,
-      deleteGroupModalOpen: false
-    }
-  },
   computed: {
     selectedGroupsText() {
       const translated = this.$gettext('%{ groupCount } selected')
@@ -212,52 +207,6 @@ export default defineComponent({
     toggleCreateGroupModal() {
       this.createGroupModalOpen = !this.createGroupModalOpen
     },
-    toggleDeleteGroupModal() {
-      this.deleteGroupModalOpen = !this.deleteGroupModalOpen
-    },
-    async deleteGroups(groups) {
-      const promises = groups.map((group) => this.graphClient.groups.deleteGroup(group.id))
-
-      try {
-        await Promise.all(promises)
-        this.showMessage({
-          title: this.$gettextInterpolate(
-            this.$ngettext(
-              'Group "%{group}" was deleted successfully',
-              '%{groupCount} groups were deleted successfully',
-              this.selectedGroups.length
-            ),
-            {
-              groupCount: this.selectedGroups.length,
-              group: this.selectedGroups[0].displayName
-            },
-            true
-          )
-        })
-        this.groups = this.groups.filter((group) => {
-          return !groups.find((deletedGroup) => group.id === deletedGroup.id)
-        })
-        this.selectedGroups = []
-        this.toggleDeleteGroupModal()
-      } catch (error) {
-        console.error(error)
-        this.showMessage({
-          title: this.$gettextInterpolate(
-            this.$ngettext(
-              'Failed to delete group "%{group}"',
-              'Failed to delete %{groupCount} groups',
-              this.selectedGroups.length
-            ),
-            {
-              groupCount: this.selectedGroups.length,
-              group: this.selectedGroups[0].displayName
-            },
-            true
-          ),
-          status: 'danger'
-        })
-      }
-    },
     async createGroup(group) {
       try {
         const response = await this.graphClient.groups.createGroup(group)
diff --git a/packages/web-app-admin-settings/tests/unit/components/Groups/BatchActions.spec.ts b/packages/web-app-admin-settings/tests/unit/components/Groups/BatchActions.spec.ts
new file mode 100644
index 00000000000..3564cc4ed66
--- /dev/null
+++ b/packages/web-app-admin-settings/tests/unit/components/Groups/BatchActions.spec.ts
@@ -0,0 +1,70 @@
+import { defaultPlugins, defaultStoreMockOptions, mount } from 'web-test-helpers'
+import { mock } from 'jest-mock-extended'
+import { Resource } from 'web-client/src/helpers'
+import BatchActions from '../../../../src/components/Groups/BatchActions.vue'
+
+const mixins = ['$_delete_items']
+const selectors = {
+  actionMenuItemStub: 'action-menu-item-stub',
+  batchActionsSquashed: '.oc-groups-appbar-batch-actions-squashed'
+}
+
+describe('BatchActions', () => {
+  describe('menu sections', () => {
+    it('do not render when no action enabled', () => {
+      const { wrapper } = getWrapper()
+      expect(wrapper.findAll(selectors.actionMenuItemStub).length).toBe(0)
+    })
+
+    it('render enabled actions', () => {
+      const enabledActions = ['$_delete_items']
+      const { wrapper } = getWrapper({ enabledActions })
+      expect(wrapper.findAll(selectors.actionMenuItemStub).length).toBe(enabledActions.length)
+    })
+  })
+  describe('limited screen space', () => {
+    it('adds the squashed-class when limited screen space is available', () => {
+      const { wrapper } = getWrapper({ props: { limitedScreenSpace: true } })
+      expect(wrapper.find(selectors.batchActionsSquashed).exists()).toBeTruthy()
+    })
+    it('correctly tells the action item component to show tooltips when limited screen space is available', () => {
+      const enabledActions = ['$_delete_items']
+      const { wrapper } = getWrapper({ enabledActions, props: { limitedScreenSpace: true } })
+      expect(
+        wrapper.findComponent<any>(selectors.actionMenuItemStub).props().showTooltip
+      ).toBeTruthy()
+    })
+  })
+})
+
+function getWrapper({ enabledActions = [], props = {} } = {}) {
+  const storeOptions = { ...defaultStoreMockOptions }
+  const mocks = getMixinMocks(enabledActions)
+  return {
+    storeOptions,
+    mocks,
+    wrapper: mount(
+      { ...BatchActions, mixins },
+      {
+        props: {
+          items: [mock<Resource>()],
+          ...props
+        },
+        global: {
+          mocks,
+          stubs: { 'action-menu-item': true },
+          plugins: [...defaultPlugins()]
+        }
+      }
+    )
+  }
+}
+
+const getMixinMocks = (enabledActions) => {
+  const mixinMocks = {}
+  for (const mixin of mixins) {
+    const isEnabled = !!enabledActions.includes(mixin)
+    mixinMocks[mixin] = [{ isEnabled: () => isEnabled, name: '', items: [] }]
+  }
+  return mixinMocks
+}
diff --git a/packages/web-app-admin-settings/tests/unit/components/Groups/ContextActions.spec.ts b/packages/web-app-admin-settings/tests/unit/components/Groups/ContextActions.spec.ts
new file mode 100644
index 00000000000..27bd7c5eb93
--- /dev/null
+++ b/packages/web-app-admin-settings/tests/unit/components/Groups/ContextActions.spec.ts
@@ -0,0 +1,55 @@
+import { defaultPlugins, defaultStoreMockOptions, mount } from 'web-test-helpers'
+import { mock } from 'jest-mock-extended'
+import { Resource } from 'web-client/src/helpers'
+import ContextActions from '../../../../src/components/Groups/ContextActions.vue'
+
+const mixins = ['$_delete_items', '$_showDetails_items']
+const selectors = {
+  actionMenuItemStub: 'action-menu-item-stub'
+}
+
+describe('ContextActions', () => {
+  describe('menu sections', () => {
+    it('do not render when no action enabled', () => {
+      const { wrapper } = getWrapper()
+      expect(wrapper.findAll(selectors.actionMenuItemStub).length).toBe(0)
+    })
+
+    it('render enabled actions', () => {
+      const enabledActions = ['$_delete_items', '$_showDetails_items']
+      const { wrapper } = getWrapper({ enabledActions })
+      expect(wrapper.findAll(selectors.actionMenuItemStub).length).toBe(enabledActions.length)
+    })
+  })
+})
+
+function getWrapper({ enabledActions = [] } = {}) {
+  const storeOptions = { ...defaultStoreMockOptions }
+  const mocks = getMixinMocks(enabledActions)
+  return {
+    storeOptions,
+    mocks,
+    wrapper: mount(
+      { ...ContextActions, mixins },
+      {
+        props: {
+          items: [mock<Resource>()]
+        },
+        global: {
+          mocks,
+          stubs: { 'action-menu-item': true },
+          plugins: [...defaultPlugins()]
+        }
+      }
+    )
+  }
+}
+
+const getMixinMocks = (enabledActions) => {
+  const mixinMocks = {}
+  for (const mixin of mixins) {
+    const isEnabled = !!enabledActions.includes(mixin)
+    mixinMocks[mixin] = [{ isEnabled: () => isEnabled, name: '', items: [] }]
+  }
+  return mixinMocks
+}
diff --git a/packages/web-app-admin-settings/tests/unit/components/Groups/DeleteGroupModal.spec.ts b/packages/web-app-admin-settings/tests/unit/components/Groups/DeleteGroupModal.spec.ts
deleted file mode 100644
index 32e9d39e914..00000000000
--- a/packages/web-app-admin-settings/tests/unit/components/Groups/DeleteGroupModal.spec.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-import DeleteGroupModal from '../../../../src/components/Groups/DeleteGroupModal.vue'
-import { defaultPlugins, shallowMount } from 'web-test-helpers'
-
-describe('DeleteGroupModal', () => {
-  describe('computed method "title"', () => {
-    it('should be singular if one group is given', () => {
-      const { wrapper } = getWrapper({
-        propsData: {
-          groups: [{ id: '1', displayName: 'Scientists' }]
-        }
-      })
-      expect(wrapper.vm.title).toEqual('Delete group Scientists?')
-    })
-    it('should be plural if multiple groups are given', () => {
-      const { wrapper } = getWrapper({
-        propsData: {
-          groups: [{ id: '1' }, { id: '2' }]
-        }
-      })
-      expect(wrapper.vm.title).toEqual('Delete 2 selected groups?')
-    })
-  })
-
-  describe('computed method "message"', () => {
-    it('should be singular if one group is given', () => {
-      const { wrapper } = getWrapper({
-        propsData: {
-          groups: [{ id: '1', displayName: 'Scientists' }]
-        }
-      })
-      expect(wrapper.vm.message).toEqual('Are you sure you want to delete this group?')
-    })
-    it('should be plural if multiple groups are given', () => {
-      const { wrapper } = getWrapper({
-        propsData: {
-          groups: [{ id: '1' }, { id: '2' }]
-        }
-      })
-      expect(wrapper.vm.message).toEqual('Are you sure you want to delete all selected groups?')
-    })
-  })
-})
-
-function getWrapper({ propsData = {} } = {}) {
-  return {
-    wrapper: shallowMount(DeleteGroupModal, {
-      props: { ...propsData },
-      global: {
-        plugins: [...defaultPlugins()]
-      }
-    })
-  }
-}
diff --git a/packages/web-app-admin-settings/tests/unit/components/Groups/GroupsList.spec.ts b/packages/web-app-admin-settings/tests/unit/components/Groups/GroupsList.spec.ts
index e02b3453007..4826011e634 100644
--- a/packages/web-app-admin-settings/tests/unit/components/Groups/GroupsList.spec.ts
+++ b/packages/web-app-admin-settings/tests/unit/components/Groups/GroupsList.spec.ts
@@ -1,10 +1,22 @@
 import UsersList from '../../../../src/components/Groups/GroupsList.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 getGroupMocks = () => [
+  { id: '1', members: [] },
+  { id: '2', members: [] }
+]
+
+jest.mock('web-pkg/src/helpers', () => ({
+  ...jest.requireActual('web-pkg/src/helpers'),
+  displayPositionedDropdown: jest.fn()
+}))
 
 describe('GroupsList', () => {
   describe('method "orderBy"', () => {
     it('should return an ascending ordered list while desc is set to false', () => {
-      const { wrapper } = getMountedWrapper()
+      const { wrapper } = getWrapper()
 
       expect(
         wrapper.vm.orderBy(
@@ -15,7 +27,7 @@ describe('GroupsList', () => {
       ).toEqual([{ displayName: 'admins' }, { displayName: 'users' }])
     })
     it('should return an descending ordered list while desc is set to true', () => {
-      const { wrapper } = getMountedWrapper()
+      const { wrapper } = getWrapper()
 
       expect(
         wrapper.vm.orderBy(
@@ -29,33 +41,64 @@ describe('GroupsList', () => {
 
   describe('method "filter"', () => {
     it('should return a list containing record admins if search term is "ad"', () => {
-      const { wrapper } = getMountedWrapper()
+      const { wrapper } = getWrapper()
 
       expect(
         wrapper.vm.filter([{ displayName: 'users' }, { displayName: 'admins' }], 'ad')
       ).toEqual([{ displayName: 'admins' }])
     })
     it('should return an an empty list if search term does not match any entry', () => {
-      const { wrapper } = getMountedWrapper()
+      const { wrapper } = getWrapper()
 
       expect(
         wrapper.vm.filter([{ displayName: 'admins' }, { displayName: 'users' }], 'ownClouders')
       ).toEqual([])
     })
   })
+  it('emits events on row click', () => {
+    const groups = getGroupMocks()
+    const { wrapper } = getWrapper({ props: { groups } })
+    wrapper.vm.rowClicked(groups[0])
+    expect(wrapper.emitted('unSelectAllGroups').length).toBeTruthy()
+    expect(wrapper.emitted('toggleSelectGroup')).toBeTruthy()
+  })
+  it('should show the context menu on right click', async () => {
+    const groups = getGroupMocks()
+    const spyDisplayPositionedDropdown = jest.mocked(displayPositionedDropdown)
+    const { wrapper } = getWrapper({ mountType: mount, props: { groups } })
+    await wrapper.find(`[data-item-id="${groups[0].id}"]`).trigger('contextmenu')
+    expect(spyDisplayPositionedDropdown).toHaveBeenCalledTimes(1)
+  })
+  it('should show the context menu on context menu button click', async () => {
+    const groups = getGroupMocks()
+    const spyDisplayPositionedDropdown = jest.mocked(displayPositionedDropdown)
+    const { wrapper } = getWrapper({ mountType: mount, props: { groups } })
+    await wrapper.find('.groups-table-btn-action-dropdown').trigger('click')
+    expect(spyDisplayPositionedDropdown).toHaveBeenCalledTimes(1)
+  })
+  it('should show the group details on details button click', async () => {
+    const groups = getGroupMocks()
+    const eventBusSpy = jest.spyOn(eventBus, 'publish')
+    const { wrapper } = getWrapper({ mountType: mount, props: { groups } })
+    await wrapper.find(`#group-details-trigger-${groups[0].id}`).trigger('click')
+    expect(eventBusSpy).toHaveBeenCalledWith(SideBarEventTopics.open)
+  })
 })
 
-function getMountedWrapper({ propsData = {} } = {}) {
+function getWrapper({ mountType = shallowMount, props = {} } = {}) {
   return {
-    wrapper: shallowMount(UsersList, {
+    wrapper: mountType(UsersList, {
       props: {
         groups: [],
         selectedGroups: [],
         headerPosition: 0,
-        ...propsData
+        ...props
       },
       global: {
-        plugins: [...defaultPlugins()]
+        plugins: [...defaultPlugins()],
+        stubs: {
+          OcCheckbox: true
+        }
       }
     })
   }
diff --git a/packages/web-app-admin-settings/tests/unit/views/Groups.spec.ts b/packages/web-app-admin-settings/tests/unit/views/Groups.spec.ts
index d48a254d96f..ac1f7d54c7a 100644
--- a/packages/web-app-admin-settings/tests/unit/views/Groups.spec.ts
+++ b/packages/web-app-admin-settings/tests/unit/views/Groups.spec.ts
@@ -3,7 +3,12 @@ import { mockAxiosResolve, mockAxiosReject } from 'web-test-helpers/src/mocks'
 import { Graph } from 'web-client'
 import { mockDeep } from 'jest-mock-extended'
 import { ClientService } from 'web-pkg/src'
-import { createStore, defaultPlugins, shallowMount } from 'web-test-helpers'
+import {
+  createStore,
+  defaultPlugins,
+  defaultStoreMockOptions,
+  shallowMount
+} from 'web-test-helpers'
 
 const defaultGraphMock = () => {
   const graph = mockDeep<Graph>()
@@ -14,7 +19,7 @@ const defaultGraphMock = () => {
 describe('Groups view', () => {
   describe('method "createGroup"', () => {
     it('should hide the modal and show message on success', async () => {
-      const wrapper = getMountedWrapper()
+      const wrapper = getWrapper()
       const showMessageStub = jest.spyOn(wrapper.vm, 'showMessage')
       const toggleCreateGroupModalStub = jest.spyOn(wrapper.vm, 'toggleCreateGroupModal')
       await wrapper.vm.createGroup({ displayName: 'admins' })
@@ -27,7 +32,7 @@ describe('Groups view', () => {
       jest.spyOn(console, 'error').mockImplementation(() => undefined)
       const graph = defaultGraphMock()
       graph.groups.createGroup.mockImplementation(() => mockAxiosReject())
-      const wrapper = getMountedWrapper({ graph })
+      const wrapper = getWrapper({ graph })
       const showMessageStub = jest.spyOn(wrapper.vm, 'showMessage')
       const toggleCreateGroupModalStub = jest.spyOn(wrapper.vm, 'toggleCreateGroupModal')
       await wrapper.vm.createGroup({ displayName: 'admins' })
@@ -37,34 +42,9 @@ describe('Groups view', () => {
     })
   })
 
-  describe('method "deleteGroups"', () => {
-    it('should hide the modal and show message on success', async () => {
-      const wrapper = getMountedWrapper()
-      const showMessageStub = jest.spyOn(wrapper.vm, 'showMessage')
-      const toggleDeleteGroupModalStub = jest.spyOn(wrapper.vm, 'toggleDeleteGroupModal')
-      await wrapper.vm.deleteGroups([{ id: '1' }])
-
-      expect(showMessageStub).toHaveBeenCalled()
-      expect(toggleDeleteGroupModalStub).toHaveBeenCalledTimes(1)
-    })
-
-    it('should show message on error', async () => {
-      jest.spyOn(console, 'error').mockImplementation(() => undefined)
-      const graph = defaultGraphMock()
-      graph.groups.deleteGroup.mockImplementation(() => mockAxiosReject())
-      const wrapper = getMountedWrapper({ graph })
-      const showMessageStub = jest.spyOn(wrapper.vm, 'showMessage')
-      const toggleDeleteGroupModalStub = jest.spyOn(wrapper.vm, 'toggleDeleteGroupModal')
-      await wrapper.vm.deleteGroups([{ id: '1' }])
-
-      expect(showMessageStub).toHaveBeenCalled()
-      expect(toggleDeleteGroupModalStub).toHaveBeenCalledTimes(0)
-    })
-  })
-
   describe('method "editGroup"', () => {
     it('should show message on success', async () => {
-      const wrapper = getMountedWrapper()
+      const wrapper = getWrapper()
       const showMessageStub = jest.spyOn(wrapper.vm, 'showMessage')
       await wrapper.vm.editGroup({ id: '1', displayName: 'Super group' })
 
@@ -75,7 +55,7 @@ describe('Groups view', () => {
       jest.spyOn(console, 'error').mockImplementation(() => undefined)
       const graph = defaultGraphMock()
       graph.groups.editGroup.mockImplementation(() => mockAxiosReject())
-      const wrapper = getMountedWrapper({ graph })
+      const wrapper = getWrapper({ graph })
       const showMessageStub = jest.spyOn(wrapper.vm, 'showMessage')
       await wrapper.vm.editGroup({})
 
@@ -89,19 +69,21 @@ describe('Groups view', () => {
      */
     // eslint-disable-next-line jest/no-disabled-tests
     it.skip('should contain EditPanel when one group is selected', () => {
-      const wrapper = getMountedWrapper({ data: { selectedGroups: [{ id: '1' }] } })
+      const wrapper = getWrapper()
+      wrapper.vm.selectedGroups = [{ id: '1' }]
       expect(
         wrapper.vm.sideBarAvailablePanels.find((panel) => panel.app === 'EditPanel').enabled
       ).toBeTruthy()
     })
     it('should contain DetailsPanel when no group is selected', () => {
-      const wrapper = getMountedWrapper({ data: { selectedGroups: [] } })
+      const wrapper = getWrapper()
       expect(
         wrapper.vm.sideBarAvailablePanels.find((panel) => panel.app === 'DetailsPanel').enabled
       ).toBeTruthy()
     })
     it('should not contain EditPanel multiple groups are selected', () => {
-      const wrapper = getMountedWrapper({ data: { selectedGroups: [{ id: '1' }, { id: '2' }] } })
+      const wrapper = getWrapper()
+      wrapper.vm.selectedGroups = [{ id: '1' }, { id: '2' }]
       expect(
         wrapper.vm.sideBarAvailablePanels.find((panel) => panel.app === 'EditPanel')
       ).toBeFalsy()
@@ -110,9 +92,8 @@ describe('Groups view', () => {
 
   describe('computed method "allGroupsSelected"', () => {
     it('should be true if every group is selected', async () => {
-      const wrapper = getMountedWrapper({
-        data: { selectedGroups: [{ id: '1' }] }
-      })
+      const wrapper = getWrapper()
+      wrapper.vm.selectedGroups = [{ id: '1' }]
       await wrapper.vm.loadResourcesTask.last
       expect(wrapper.vm.allGroupsSelected).toBeTruthy()
     })
@@ -121,30 +102,19 @@ describe('Groups view', () => {
       graph.groups.listGroups.mockImplementation(() =>
         mockAxiosResolve({ value: [{ id: '1' }, { id: '2' }] })
       )
-      const wrapper = getMountedWrapper({
-        graph,
-        data: { selectedGroups: [{ id: '1' }] }
-      })
+      const wrapper = getWrapper({ graph })
+      wrapper.vm.selectedGroups = [{ id: '1' }]
       await wrapper.vm.loadResourcesTask.last
       expect(wrapper.vm.allGroupsSelected).toBeFalsy()
     })
   })
 })
 
-function getMountedWrapper({ graph = defaultGraphMock(), data = {}, mocks = {} } = {}) {
+function getWrapper({ graph = defaultGraphMock(), mocks = {} } = {}) {
   const $clientService = mockDeep<ClientService>()
   $clientService.graphAuthenticated.mockImplementation(() => graph)
-
-  const store = createStore({
-    actions: {
-      showMessage: jest.fn()
-    },
-    getters: {
-      configuration: () => ({
-        server: 'https://example.com/'
-      })
-    }
-  })
+  const storeOptions = { ...defaultStoreMockOptions }
+  const store = createStore(storeOptions)
 
   return shallowMount(Groups, {
     global: {
@@ -172,13 +142,7 @@ function getMountedWrapper({ graph = defaultGraphMock(), data = {}, mocks = {} }
     },
     data: () => {
       return {
-        selectedGroups: [
-          {
-            id: 1
-          }
-        ],
-        sideBarActivePanel: 'DetailsPanel',
-        ...data
+        sideBarActivePanel: 'DetailsPanel'
       }
     }
   })

From 6113e05a95e78891b1322f2741a6845a0c6e2127 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Wed, 25 Jan 2023 14:09:33 +0100
Subject: [PATCH 2/5] Fix linter

---
 .../src/components/Groups/BatchActions.vue    |  4 +--
 .../src/mixins/groups/delete.ts               | 33 +++++--------------
 2 files changed, 11 insertions(+), 26 deletions(-)

diff --git a/packages/web-app-admin-settings/src/components/Groups/BatchActions.vue b/packages/web-app-admin-settings/src/components/Groups/BatchActions.vue
index cf19bbf8747..600cc352614 100644
--- a/packages/web-app-admin-settings/src/components/Groups/BatchActions.vue
+++ b/packages/web-app-admin-settings/src/components/Groups/BatchActions.vue
@@ -21,7 +21,7 @@
 import ActionMenuItem from 'web-pkg/src/components/ContextActions/ActionMenuItem.vue'
 import Delete from '../../mixins/groups/delete'
 import { computed, defineComponent, getCurrentInstance, PropType } from 'vue'
-import { SpaceResource } from 'web-client'
+import { Group } from 'web-client/src/generated'
 
 export default defineComponent({
   name: 'ActionsPanel',
@@ -29,7 +29,7 @@ export default defineComponent({
   mixins: [Delete],
   props: {
     selectedGroups: {
-      type: Array as PropType<Array<SpaceResource>>,
+      type: Array as PropType<Group[]>,
       required: true
     },
     limitedScreenSpace: {
diff --git a/packages/web-app-admin-settings/src/mixins/groups/delete.ts b/packages/web-app-admin-settings/src/mixins/groups/delete.ts
index 6e21a1ba97c..6db4788f8a6 100644
--- a/packages/web-app-admin-settings/src/mixins/groups/delete.ts
+++ b/packages/web-app-admin-settings/src/mixins/groups/delete.ts
@@ -1,11 +1,8 @@
-import { mapActions, mapGetters, mapMutations, mapState } from 'vuex'
-import {clientService, eventBus} from "web-pkg";
+import { mapActions } from 'vuex'
+import { clientService, configurationManager, eventBus } from 'web-pkg'
 
 export default {
   computed: {
-    ...mapGetters(['configuration']),
-    ...mapState(['user']),
-
     $_delete_items() {
       return [
         {
@@ -25,15 +22,7 @@ export default {
     }
   },
   methods: {
-    ...mapActions([
-      'createModal',
-      'hideModal',
-      'setModalInputErrorMessage',
-      'showMessage',
-      'toggleModalConfirmButton'
-    ]),
-    ...mapMutations('Files', ['REMOVE_FILES']),
-    ...mapMutations('runtime/spaces', ['REMOVE_SPACE']),
+    ...mapActions(['createModal', 'hideModal', 'showMessage']),
 
     $_delete_trigger({ resources }) {
       if (!resources.length) {
@@ -68,9 +57,11 @@ export default {
     },
 
     async $_delete_deleteGroups(groups) {
-      console.log('groups', groups)
       const accessToken = this.$store.getters['runtime/auth/accessToken']
-      const graphClient = clientService.graphAuthenticated(this.configuration.server, accessToken)
+      const graphClient = clientService.graphAuthenticated(
+        configurationManager.serverUrl,
+        accessToken
+      )
       const promises = groups.map((group) => graphClient.groups.deleteGroup(group.id))
 
       try {
@@ -81,10 +72,7 @@ export default {
             'Group "%{group}" was deleted successfully',
             '%{groupCount} groups were deleted successfully',
             groups.length,
-            {
-              groupCount: groups.length,
-              group: groups[0].displayName
-            },
+            { groupCount: groups.length, group: groups[0].displayName },
             true
           )
         })
@@ -97,10 +85,7 @@ export default {
             'Failed to delete group "%{group}"',
             'Failed to delete %{groupCount} groups',
             groups.length,
-            {
-              groupCount: groups.length,
-              group: groups[0].displayName
-            },
+            { groupCount: groups.length, group: groups[0].displayName },
             true
           ),
           status: 'danger'

From ff42ccbd94fee2da05b6c0d33406d10122b50661 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Wed, 25 Jan 2023 14:58:18 +0100
Subject: [PATCH 3/5] Make BatchActions component more generic

---
 .../components/{Groups => }/BatchActions.vue  | 34 ++++-----
 .../src/views/Groups.vue                      | 30 ++++++--
 .../unit/components/BatchActions.spec.ts      | 51 ++++++++++++++
 .../components/Groups/BatchActions.spec.ts    | 70 -------------------
 4 files changed, 90 insertions(+), 95 deletions(-)
 rename packages/web-app-admin-settings/src/components/{Groups => }/BatchActions.vue (52%)
 create mode 100644 packages/web-app-admin-settings/tests/unit/components/BatchActions.spec.ts
 delete mode 100644 packages/web-app-admin-settings/tests/unit/components/Groups/BatchActions.spec.ts

diff --git a/packages/web-app-admin-settings/src/components/Groups/BatchActions.vue b/packages/web-app-admin-settings/src/components/BatchActions.vue
similarity index 52%
rename from packages/web-app-admin-settings/src/components/Groups/BatchActions.vue
rename to packages/web-app-admin-settings/src/components/BatchActions.vue
index 600cc352614..b983ad9432c 100644
--- a/packages/web-app-admin-settings/src/components/Groups/BatchActions.vue
+++ b/packages/web-app-admin-settings/src/components/BatchActions.vue
@@ -1,14 +1,14 @@
 <template>
   <div>
     <oc-list
-      id="oc-groups-appbar-batch-actions"
-      :class="{ 'oc-groups-appbar-batch-actions-squashed': limitedScreenSpace }"
+      id="oc-appbar-batch-actions"
+      :class="{ 'oc-appbar-batch-actions-squashed': limitedScreenSpace }"
     >
       <action-menu-item
         v-for="(action, index) in actions"
         :key="`action-${index}`"
         :action="action"
-        :items="selectedGroups"
+        :items="selectedItems"
         appearance="outline"
         class="batch-actions oc-mr-s"
         :show-tooltip="limitedScreenSpace"
@@ -19,17 +19,18 @@
 
 <script lang="ts">
 import ActionMenuItem from 'web-pkg/src/components/ContextActions/ActionMenuItem.vue'
-import Delete from '../../mixins/groups/delete'
-import { computed, defineComponent, getCurrentInstance, PropType } from 'vue'
-import { Group } from 'web-client/src/generated'
+import { defineComponent } from 'vue'
 
 export default defineComponent({
-  name: 'ActionsPanel',
+  name: 'BatchActions',
   components: { ActionMenuItem },
-  mixins: [Delete],
   props: {
-    selectedGroups: {
-      type: Array as PropType<Group[]>,
+    selectedItems: {
+      type: Array,
+      required: true
+    },
+    actions: {
+      type: Array,
       required: true
     },
     limitedScreenSpace: {
@@ -37,21 +38,12 @@ export default defineComponent({
       default: false,
       required: false
     }
-  },
-  setup(props) {
-    const instance = getCurrentInstance().proxy as any
-    const actions = computed(() => {
-      return [...instance.$_delete_items].filter((item) =>
-        item.isEnabled({ resources: props.selectedGroups })
-      )
-    })
-    return { actions }
   }
 })
 </script>
 
 <style lang="scss">
-#oc-groups-appbar-batch-actions {
+#oc-appbar-batch-actions {
   display: block;
   li {
     float: left !important;
@@ -65,7 +57,7 @@ export default defineComponent({
     display: flex;
   }
 }
-.oc-groups-appbar-batch-actions-squashed .oc-files-context-action-label {
+.oc-appbar-batch-actions-squashed .oc-files-context-action-label {
   display: none;
 }
 </style>
diff --git a/packages/web-app-admin-settings/src/views/Groups.vue b/packages/web-app-admin-settings/src/views/Groups.vue
index 21023baefb1..457c5ce21a4 100644
--- a/packages/web-app-admin-settings/src/views/Groups.vue
+++ b/packages/web-app-admin-settings/src/views/Groups.vue
@@ -22,7 +22,11 @@
             >
               <oc-icon name="close" />
             </oc-button>
-            <batch-actions class="oc-ml-s" :selected-groups="selectedGroups" />
+            <batch-actions
+              class="oc-ml-s"
+              :selected-items="selectedGroups"
+              :actions="batchActions"
+            />
           </div>
           <div v-else>
             <oc-button variation="primary" appearance="filled" @click="toggleCreateGroupModal">
@@ -72,9 +76,17 @@
 import GroupsList from '../components/Groups/GroupsList.vue'
 import CreateGroupModal from '../components/Groups/CreateGroupModal.vue'
 import ContextActions from '../components/Groups/ContextActions.vue'
-import BatchActions from '../components/Groups/BatchActions.vue'
+import BatchActions from '../components/BatchActions.vue'
 import NoContentMessage from 'web-pkg/src/components/NoContentMessage.vue'
-import { defineComponent, ref, unref, onBeforeUnmount, onMounted } from 'vue'
+import {
+  computed,
+  defineComponent,
+  ref,
+  getCurrentInstance,
+  unref,
+  onBeforeUnmount,
+  onMounted
+} from 'vue'
 import { useTask } from 'vue-concurrency'
 import { eventBus } from 'web-pkg/src/services/eventBus'
 import { mapActions } from 'vuex'
@@ -83,6 +95,7 @@ import EditPanel from '../components/Groups/SideBar/EditPanel.vue'
 import { useGraphClient } from 'web-pkg/src/composables'
 import AppTemplate from '../components/AppTemplate.vue'
 import { useSideBar } from 'web-pkg/src/composables/sideBar'
+import Delete from '../mixins/groups/delete'
 
 export default defineComponent({
   components: {
@@ -93,7 +106,9 @@ export default defineComponent({
     BatchActions,
     ContextActions
   },
+  mixins: [Delete],
   setup() {
+    const instance = getCurrentInstance().proxy as any
     const groups = ref([])
     let loadResourcesEventToken
     const template = ref()
@@ -114,6 +129,12 @@ export default defineComponent({
       listHeaderPosition.value = unref(template)?.$refs?.appBar?.getBoundingClientRect()?.height
     }
 
+    const batchActions = computed(() => {
+      return [...instance.$_delete_items].filter((item) =>
+        item.isEnabled({ resources: unref(selectedGroups) })
+      )
+    })
+
     onMounted(async () => {
       await loadResourcesTask.perform()
       loadResourcesEventToken = eventBus.subscribe('app.admin-settings.list.load', () => {
@@ -136,7 +157,8 @@ export default defineComponent({
       template,
       loadResourcesTask,
       graphClient,
-      listHeaderPosition
+      listHeaderPosition,
+      batchActions
     }
   },
   computed: {
diff --git a/packages/web-app-admin-settings/tests/unit/components/BatchActions.spec.ts b/packages/web-app-admin-settings/tests/unit/components/BatchActions.spec.ts
new file mode 100644
index 00000000000..df48e98e9d1
--- /dev/null
+++ b/packages/web-app-admin-settings/tests/unit/components/BatchActions.spec.ts
@@ -0,0 +1,51 @@
+import { defaultPlugins, mount } from 'web-test-helpers'
+import { mock } from 'jest-mock-extended'
+import { Resource } from 'web-client/src/helpers'
+import BatchActions from '../../../src/components/BatchActions.vue'
+
+const selectors = {
+  actionMenuItemStub: 'action-menu-item-stub',
+  batchActionsSquashed: '.oc-appbar-batch-actions-squashed'
+}
+
+describe('BatchActions', () => {
+  describe('menu sections', () => {
+    it('do not render when no action enabled', () => {
+      const { wrapper } = getWrapper()
+      expect(wrapper.findAll(selectors.actionMenuItemStub).length).toBe(0)
+    })
+
+    it('render enabled actions', () => {
+      const enabledActions = ['$_delete_items']
+      const { wrapper } = getWrapper({ props: { actions: [{}] } })
+      expect(wrapper.findAll(selectors.actionMenuItemStub).length).toBe(enabledActions.length)
+    })
+  })
+  describe('limited screen space', () => {
+    it('adds the squashed-class when limited screen space is available', () => {
+      const { wrapper } = getWrapper({ props: { limitedScreenSpace: true } })
+      expect(wrapper.find(selectors.batchActionsSquashed).exists()).toBeTruthy()
+    })
+    it('correctly tells the action item component to show tooltips when limited screen space is available', () => {
+      const { wrapper } = getWrapper({ props: { actions: [{}], limitedScreenSpace: true } })
+      expect(
+        wrapper.findComponent<any>(selectors.actionMenuItemStub).props().showTooltip
+      ).toBeTruthy()
+    })
+  })
+})
+
+function getWrapper({ props = {} } = {}) {
+  return {
+    wrapper: mount(BatchActions, {
+      props: {
+        items: [mock<Resource>()],
+        ...props
+      },
+      global: {
+        stubs: { 'action-menu-item': true },
+        plugins: [...defaultPlugins()]
+      }
+    })
+  }
+}
diff --git a/packages/web-app-admin-settings/tests/unit/components/Groups/BatchActions.spec.ts b/packages/web-app-admin-settings/tests/unit/components/Groups/BatchActions.spec.ts
deleted file mode 100644
index 3564cc4ed66..00000000000
--- a/packages/web-app-admin-settings/tests/unit/components/Groups/BatchActions.spec.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-import { defaultPlugins, defaultStoreMockOptions, mount } from 'web-test-helpers'
-import { mock } from 'jest-mock-extended'
-import { Resource } from 'web-client/src/helpers'
-import BatchActions from '../../../../src/components/Groups/BatchActions.vue'
-
-const mixins = ['$_delete_items']
-const selectors = {
-  actionMenuItemStub: 'action-menu-item-stub',
-  batchActionsSquashed: '.oc-groups-appbar-batch-actions-squashed'
-}
-
-describe('BatchActions', () => {
-  describe('menu sections', () => {
-    it('do not render when no action enabled', () => {
-      const { wrapper } = getWrapper()
-      expect(wrapper.findAll(selectors.actionMenuItemStub).length).toBe(0)
-    })
-
-    it('render enabled actions', () => {
-      const enabledActions = ['$_delete_items']
-      const { wrapper } = getWrapper({ enabledActions })
-      expect(wrapper.findAll(selectors.actionMenuItemStub).length).toBe(enabledActions.length)
-    })
-  })
-  describe('limited screen space', () => {
-    it('adds the squashed-class when limited screen space is available', () => {
-      const { wrapper } = getWrapper({ props: { limitedScreenSpace: true } })
-      expect(wrapper.find(selectors.batchActionsSquashed).exists()).toBeTruthy()
-    })
-    it('correctly tells the action item component to show tooltips when limited screen space is available', () => {
-      const enabledActions = ['$_delete_items']
-      const { wrapper } = getWrapper({ enabledActions, props: { limitedScreenSpace: true } })
-      expect(
-        wrapper.findComponent<any>(selectors.actionMenuItemStub).props().showTooltip
-      ).toBeTruthy()
-    })
-  })
-})
-
-function getWrapper({ enabledActions = [], props = {} } = {}) {
-  const storeOptions = { ...defaultStoreMockOptions }
-  const mocks = getMixinMocks(enabledActions)
-  return {
-    storeOptions,
-    mocks,
-    wrapper: mount(
-      { ...BatchActions, mixins },
-      {
-        props: {
-          items: [mock<Resource>()],
-          ...props
-        },
-        global: {
-          mocks,
-          stubs: { 'action-menu-item': true },
-          plugins: [...defaultPlugins()]
-        }
-      }
-    )
-  }
-}
-
-const getMixinMocks = (enabledActions) => {
-  const mixinMocks = {}
-  for (const mixin of mixins) {
-    const isEnabled = !!enabledActions.includes(mixin)
-    mixinMocks[mixin] = [{ isEnabled: () => isEnabled, name: '', items: [] }]
-  }
-  return mixinMocks
-}

From cf048ab46bd87cfc97fee6b89c9e5b6a3a3faf62 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Wed, 25 Jan 2023 15:16:27 +0100
Subject: [PATCH 4/5] Add tests for batch actions in Groups view

---
 .../tests/unit/views/Groups.spec.ts           | 93 +++++++++++--------
 1 file changed, 52 insertions(+), 41 deletions(-)

diff --git a/packages/web-app-admin-settings/tests/unit/views/Groups.spec.ts b/packages/web-app-admin-settings/tests/unit/views/Groups.spec.ts
index ac1f7d54c7a..570488fc034 100644
--- a/packages/web-app-admin-settings/tests/unit/views/Groups.spec.ts
+++ b/packages/web-app-admin-settings/tests/unit/views/Groups.spec.ts
@@ -5,21 +5,24 @@ import { mockDeep } from 'jest-mock-extended'
 import { ClientService } from 'web-pkg/src'
 import {
   createStore,
+  defaultComponentMocks,
   defaultPlugins,
   defaultStoreMockOptions,
-  shallowMount
+  mount
 } from 'web-test-helpers'
 
+const selectors = { batchActionsStub: 'batch-actions-stub' }
 const defaultGraphMock = () => {
   const graph = mockDeep<Graph>()
   graph.groups.listGroups.mockImplementation(() => mockAxiosResolve({ value: [{ id: '1' }] }))
   return graph
 }
+jest.mock('web-pkg/src/composables/appDefaults')
 
 describe('Groups view', () => {
   describe('method "createGroup"', () => {
     it('should hide the modal and show message on success', async () => {
-      const wrapper = getWrapper()
+      const { wrapper } = getWrapper()
       const showMessageStub = jest.spyOn(wrapper.vm, 'showMessage')
       const toggleCreateGroupModalStub = jest.spyOn(wrapper.vm, 'toggleCreateGroupModal')
       await wrapper.vm.createGroup({ displayName: 'admins' })
@@ -32,7 +35,7 @@ describe('Groups view', () => {
       jest.spyOn(console, 'error').mockImplementation(() => undefined)
       const graph = defaultGraphMock()
       graph.groups.createGroup.mockImplementation(() => mockAxiosReject())
-      const wrapper = getWrapper({ graph })
+      const { wrapper } = getWrapper({ graph })
       const showMessageStub = jest.spyOn(wrapper.vm, 'showMessage')
       const toggleCreateGroupModalStub = jest.spyOn(wrapper.vm, 'toggleCreateGroupModal')
       await wrapper.vm.createGroup({ displayName: 'admins' })
@@ -44,7 +47,7 @@ describe('Groups view', () => {
 
   describe('method "editGroup"', () => {
     it('should show message on success', async () => {
-      const wrapper = getWrapper()
+      const { wrapper } = getWrapper()
       const showMessageStub = jest.spyOn(wrapper.vm, 'showMessage')
       await wrapper.vm.editGroup({ id: '1', displayName: 'Super group' })
 
@@ -55,7 +58,7 @@ describe('Groups view', () => {
       jest.spyOn(console, 'error').mockImplementation(() => undefined)
       const graph = defaultGraphMock()
       graph.groups.editGroup.mockImplementation(() => mockAxiosReject())
-      const wrapper = getWrapper({ graph })
+      const { wrapper } = getWrapper({ graph })
       const showMessageStub = jest.spyOn(wrapper.vm, 'showMessage')
       await wrapper.vm.editGroup({})
 
@@ -69,20 +72,20 @@ describe('Groups view', () => {
      */
     // eslint-disable-next-line jest/no-disabled-tests
     it.skip('should contain EditPanel when one group is selected', () => {
-      const wrapper = getWrapper()
+      const { wrapper } = getWrapper()
       wrapper.vm.selectedGroups = [{ id: '1' }]
       expect(
         wrapper.vm.sideBarAvailablePanels.find((panel) => panel.app === 'EditPanel').enabled
       ).toBeTruthy()
     })
     it('should contain DetailsPanel when no group is selected', () => {
-      const wrapper = getWrapper()
+      const { wrapper } = getWrapper()
       expect(
         wrapper.vm.sideBarAvailablePanels.find((panel) => panel.app === 'DetailsPanel').enabled
       ).toBeTruthy()
     })
     it('should not contain EditPanel multiple groups are selected', () => {
-      const wrapper = getWrapper()
+      const { wrapper } = getWrapper()
       wrapper.vm.selectedGroups = [{ id: '1' }, { id: '2' }]
       expect(
         wrapper.vm.sideBarAvailablePanels.find((panel) => panel.app === 'EditPanel')
@@ -92,7 +95,7 @@ describe('Groups view', () => {
 
   describe('computed method "allGroupsSelected"', () => {
     it('should be true if every group is selected', async () => {
-      const wrapper = getWrapper()
+      const { wrapper } = getWrapper()
       wrapper.vm.selectedGroups = [{ id: '1' }]
       await wrapper.vm.loadResourcesTask.last
       expect(wrapper.vm.allGroupsSelected).toBeTruthy()
@@ -102,48 +105,56 @@ describe('Groups view', () => {
       graph.groups.listGroups.mockImplementation(() =>
         mockAxiosResolve({ value: [{ id: '1' }, { id: '2' }] })
       )
-      const wrapper = getWrapper({ graph })
+      const { wrapper } = getWrapper({ graph })
       wrapper.vm.selectedGroups = [{ id: '1' }]
       await wrapper.vm.loadResourcesTask.last
       expect(wrapper.vm.allGroupsSelected).toBeFalsy()
     })
   })
+
+  describe('batch actions', () => {
+    it('do not display when no group selected', async () => {
+      const { wrapper } = getWrapper()
+      await wrapper.vm.loadResourcesTask.last
+      expect(wrapper.find(selectors.batchActionsStub).exists()).toBeFalsy()
+    })
+    it('display when one group selected', async () => {
+      const { wrapper } = getWrapper()
+      await wrapper.vm.loadResourcesTask.last
+      wrapper.vm.toggleSelectGroup({ id: '1' })
+      await wrapper.vm.$nextTick()
+      expect(wrapper.find(selectors.batchActionsStub).exists()).toBeTruthy()
+    })
+    it('display when more than one groups selected', async () => {
+      const { wrapper } = getWrapper()
+      await wrapper.vm.loadResourcesTask.last
+      wrapper.vm.toggleSelectAllGroups()
+      await wrapper.vm.$nextTick()
+      expect(wrapper.find(selectors.batchActionsStub).exists()).toBeTruthy()
+    })
+  })
 })
 
-function getWrapper({ graph = defaultGraphMock(), mocks = {} } = {}) {
+function getWrapper({ graph = defaultGraphMock() } = {}) {
   const $clientService = mockDeep<ClientService>()
   $clientService.graphAuthenticated.mockImplementation(() => graph)
+  const mocks = { ...defaultComponentMocks(), $clientService }
   const storeOptions = { ...defaultStoreMockOptions }
   const store = createStore(storeOptions)
-
-  return shallowMount(Groups, {
-    global: {
-      plugins: [...defaultPlugins(), store],
-      mocks: {
-        $gettext: jest.fn(),
-        $ngettext: jest.fn(),
-        $gettextInterpolate: jest.fn(),
-        $clientService,
-        ...mocks
-      },
-      stubs: {
-        'create-group-modal': true,
-        'delete-group-modal': true,
-        'app-loading-spinner': true,
-        'no-content-message': true,
-        'oc-breadcrumb': true,
-        'oc-button': true,
-        'oc-icon': true,
-        translate: true
-      },
-      directives: {
-        'oc-tooltip': jest.fn()
+  return {
+    wrapper: mount(Groups, {
+      global: {
+        plugins: [...defaultPlugins(), store],
+        mocks,
+        stubs: {
+          CreateGroupModal: true,
+          AppLoadingSpinner: true,
+          NoContentMessage: true,
+          GroupsList: true,
+          OcBreadcrumb: true,
+          BatchActions: true
+        }
       }
-    },
-    data: () => {
-      return {
-        sideBarActivePanel: 'DetailsPanel'
-      }
-    }
-  })
+    })
+  }
 }

From 45f9cf87018c870ea5608940523a94f6ba03806c Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Wed, 25 Jan 2023 16:32:54 +0100
Subject: [PATCH 5/5] Adjust delete action button class

---
 packages/web-app-admin-settings/src/mixins/groups/delete.ts | 2 +-
 packages/web-pkg/src/mixins/spaces/delete.ts                | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/web-app-admin-settings/src/mixins/groups/delete.ts b/packages/web-app-admin-settings/src/mixins/groups/delete.ts
index 6db4788f8a6..6068a2ba9b9 100644
--- a/packages/web-app-admin-settings/src/mixins/groups/delete.ts
+++ b/packages/web-app-admin-settings/src/mixins/groups/delete.ts
@@ -7,7 +7,7 @@ export default {
       return [
         {
           name: 'delete',
-          icon: 'close-circle',
+          icon: 'delete-bin',
           label: () => {
             return this.$gettext('Delete')
           },
diff --git a/packages/web-pkg/src/mixins/spaces/delete.ts b/packages/web-pkg/src/mixins/spaces/delete.ts
index cea0556b750..ac580ce124b 100644
--- a/packages/web-pkg/src/mixins/spaces/delete.ts
+++ b/packages/web-pkg/src/mixins/spaces/delete.ts
@@ -11,7 +11,7 @@ export default {
       return [
         {
           name: 'delete',
-          icon: 'close-circle',
+          icon: 'delete-bin',
           label: () => {
             return this.$gettext('Delete')
           },