Add context menu to users

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

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>

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,26 +88,28 @@
 </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: {
       type: Array,
       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: {

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'
+        })
+      }
+    }
+  }
+}

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')
+    }
+  }
+}