fix(settings): Migrate away from deprecated NcPopoverMenu

apps/settings/css/settings.scss

@@ -1386,7 +1386,7 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
 			// Scroll if too much groups
 			&:not(.row--editable) {
 				.groups,
-                                .subadmins,
+				.subadmins,
 				.subAdminsGroups {
 					overflow: auto;
 					max-height: 100%;
@@ -1395,7 +1395,7 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
 
 			.managers,
 			.groups,
-                        .subadmins,
+			.subadmins,
 			.subAdminsGroups,
 			.quota {
 				min-width: $grid-col-min-width;
@@ -1569,50 +1569,14 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
 
 				&.userActions {
 					display: flex;
+					align-items: center;
 					justify-content: flex-end;
 
-					#newsubmit {
-						width: 100%;
-					}
-
-					.toggleUserActions {
-						position: relative;
-						display: flex;
-						align-items: center;
-						background-color: var(--color-main-background);
-
-						.icon-more {
-							width: 44px;
-							height: 44px;
-							opacity: .5;
-							cursor: pointer;
-
-							&:focus,
-							&:hover,
-							&:active {
-								opacity: .7;
-								background-color: var(--color-background-dark)
-							}
-						}
-					}
-
-					.feedback {
-						display: flex;
-						align-items: center;
-						white-space: nowrap;
-						transition: opacity 200ms ease-in-out;
-
-						.icon-checkmark {
-							opacity: .5;
-							margin-right: 5px;
-						}
-					}
-				}
-
-				/* Fill the grid cell */
-				.v-select.select-vue {
-					min-width: 100%;
-					width: 100%;
+					// Make sure to cover whole row
+					height: 100%;
+					width: fit-content;
+					padding-inline: 12px;
+					background-color: var(--color-main-background);
 				}
 			}
 		}

apps/settings/src/components/Users/UserRow.vue

@@ -44,7 +44,6 @@
 	<!-- User full data -->
 	<UserRowSimple v-else-if="!editing"
 		:editing.sync="editing"
-		:feedback-message="feedbackMessage"
 		:groups="groups"
 		:languages="languages"
 		:loading="loading"
@@ -222,59 +221,41 @@
 		</div>
 
 		<div class="userActions">
-			<div v-if="!loading.all"
-				class="toggleUserActions">
-				<NcActions>
-					<NcActionButton icon="icon-checkmark"
-						:title="t('settings', 'Done')"
-						:aria-label="t('settings', 'Done')"
-						@click="handleDoneButton" />
-				</NcActions>
-				<div v-click-outside="hideMenu" class="userPopoverMenuWrapper">
-					<button class="icon-more"
-						:aria-expanded="openedMenu"
-						:aria-label="t('settings', 'Toggle user actions menu')"
-						@click.prevent="toggleMenu" />
-					<div :class="{ 'open': openedMenu }" class="popovermenu">
-						<NcPopoverMenu :menu="userActions" />
-					</div>
-				</div>
-			</div>
-			<div :style="{opacity: feedbackMessage !== '' ? 1 : 0}"
-				class="feedback">
-				<div class="icon-checkmark" />
-				{{ feedbackMessage }}
-			</div>
+			<UserRowActions v-if="!loading.all"
+				:actions="userActions"
+				:edit="true"
+				@update:edit="toggleEdit" />
 		</div>
 	</div>
 </template>
 
 <script>
-import ClickOutside from 'vue-click-outside'
+import { showSuccess, showError } from '@nextcloud/dialogs'
 
-import NcPopoverMenu from '@nextcloud/vue/dist/Components/NcPopoverMenu.js'
 import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
-import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
-import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
+import ClickOutside from 'vue-click-outside'
+
+import UserRowActions from './UserRowActions.vue'
 import UserRowSimple from './UserRowSimple.vue'
 import UserRowMixin from '../../mixins/UserRowMixin.js'
-import { showSuccess, showError } from '@nextcloud/dialogs'
 
 export default {
 	name: 'UserRow',
+
 	components: {
-		UserRowSimple,
-		NcPopoverMenu,
-		NcActions,
-		NcActionButton,
 		NcSelect,
 		NcTextField,
+		UserRowActions,
+		UserRowSimple,
 	},
+
 	directives: {
 		ClickOutside,
 	},
+
 	mixins: [UserRowMixin],
+
 	props: {
 		users: {
 			type: Array,
@@ -325,7 +306,6 @@ export default {
 			selectedQuota: false,
 			rand: parseInt(Math.random() * 1000),
 			openedMenu: false,
-			feedbackMessage: '',
 			possibleManagers: [],
 			currentManager: '',
 			editing: false,
@@ -348,8 +328,8 @@ export default {
 			editedMail: this.user.email ?? '',
 		}
 	},
-	computed: {
 
+	computed: {
 		/* USER POPOVERMENU ACTIONS */
 		userActions() {
 			const actions = [
@@ -400,8 +380,10 @@ export default {
 			return this.languages[0].languages.concat(this.languages[1].languages)
 		},
 	},
+
 	async beforeMount() {
 		await this.searchUserManager()
+
 		if (this.user.manager) {
 			await this.initManager(this.user.manager)
 		}
@@ -432,13 +414,14 @@ export default {
 						this.loading.wipe = true
 						this.loading.all = true
 						this.$store.dispatch('wipeUserDevices', userid)
-							.then(() => {
+							.then(() => showSuccess(t('settings', 'Wiped {userid}\'s devices', { userid })), { timeout: 2000 })
+							.finally(() => {
 								this.loading.wipe = false
 								this.loading.all = false
 							})
 					}
 				},
-				true
+				true,
 			)
 		},
 
@@ -500,7 +483,7 @@ export default {
 							})
 					}
 				},
-				true
+				true,
 			)
 		},
 
@@ -778,19 +761,13 @@ export default {
 		sendWelcomeMail() {
 			this.loading.all = true
 			this.$store.dispatch('sendWelcomeMail', this.user.id)
-				.then(success => {
-					if (success) {
-						// Show feedback to indicate the success
-						this.feedbackMessage = t('setting', 'Welcome mail sent!')
-						setTimeout(() => {
-							this.feedbackMessage = ''
-						}, 2000)
-					}
+				.then(() => showSuccess(t('setting', 'Welcome mail sent!'), { timeout: 2000 }))
+				.finally(() => {
 					this.loading.all = false
 				})
 		},
 
-		handleDoneButton() {
+		toggleEdit() {
 			this.editing = false
 			if (this.editedDisplayName !== this.user.displayname) {
 				this.editedDisplayName = this.user.displayname
@@ -807,7 +784,12 @@ export default {
 		z-index: 1 !important;
 	}
 
-  .row :deep() {
+	.row :deep() {
+		.v-select.select {
+			// reset min width to 100% instead of X px
+			min-width: 100%;
+		}
+
 		.mailAddress,
 		.password,
 		.displayName {

apps/settings/src/components/Users/UserRowActions.vue

@@ -0,0 +1,78 @@
+<template>
+	<NcActions :aria-label="t('settings', 'Toggle user actions menu')"
+		:inline="1">
+		<NcActionButton @click="toggleEdit">
+			{{ edit ? t('settings', 'Done') : t('settings', 'Edit') }}
+			<template #icon>
+				<NcIconSvgWrapper :svg="editSvg" aria-hidden="true" />
+			</template>
+		</NcActionButton>
+		<NcActionButton v-for="(action, index) in actions"
+			:key="index"
+			:aria-label="action.text"
+			:icon="action.icon"
+			@click="action.action">
+			{{ action.text }}
+		</NcActionButton>
+	</NcActions>
+</template>
+
+<script lang="ts">
+import { PropType, defineComponent } from 'vue'
+
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
+import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js'
+import SvgCheck from '@mdi/svg/svg/check.svg?raw'
+import SvgPencil from '@mdi/svg/svg/pencil.svg?raw'
+
+interface UserAction {
+	action: (event: MouseEvent) => void,
+	icon: string,
+	text: string
+}
+
+export default defineComponent({
+	components: {
+		NcActionButton,
+		NcActions,
+		NcIconSvgWrapper,
+	},
+
+	props: {
+		/**
+		 * Array of user actions
+		 */
+		actions: {
+			type: Array as PropType<readonly UserAction[]>,
+			required: true,
+		},
+
+		/**
+		 * The state whether the row is currently edited
+		 */
+		edit: {
+			type: Boolean,
+			required: true,
+		},
+	},
+
+	computed: {
+		/**
+		 * Current MDI logo to show for edit toggle
+		 */
+		editSvg() {
+			return this.edit ? SvgCheck : SvgPencil
+		},
+	},
+
+	methods: {
+		/**
+		 * Toggle edit mode by emitting the update event
+		 */
+		toggleEdit() {
+			this.$emit('update:edit', !this.edit)
+		},
+	},
+})
+</script>

apps/settings/src/components/Users/UserRowSimple.vue

@@ -59,45 +59,26 @@
 			{{ user.manager }}
 		</div>
 		<div class="userActions">
-			<div v-if="canEdit && !loading.all" class="toggleUserActions">
-				<NcActions>
-					<NcActionButton icon="icon-rename"
-						:title="t('settings', 'Edit User')"
-						:aria-label="t('settings', 'Edit User')"
-						@click="toggleEdit" />
-				</NcActions>
-				<div class="userPopoverMenuWrapper">
-					<button v-click-outside="hideMenu"
-						class="icon-more"
-						:aria-expanded="openedMenu"
-						:aria-label="t('settings', 'Toggle user actions menu')"
-						@click.prevent="toggleMenu" />
-					<div class="popovermenu" :class="{ 'open': openedMenu }">
-						<NcPopoverMenu :menu="userActions" />
-					</div>
-				</div>
-			</div>
-			<div class="feedback" :style="{opacity: feedbackMessage !== '' ? 1 : 0}">
-				<div class="icon-checkmark" />
-				{{ feedbackMessage }}
-			</div>
+			<UserRowActions v-if="canEdit && !loading.all"
+				:actions="userActions"
+				:edit="false"
+				@update:edit="toggleEdit" />
 		</div>
 	</div>
 </template>
 
 <script>
-import NcPopoverMenu from '@nextcloud/vue/dist/Components/NcPopoverMenu.js'
-import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
-import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
-import ClickOutside from 'vue-click-outside'
 import { getCurrentUser } from '@nextcloud/auth'
+
+import ClickOutside from 'vue-click-outside'
+
+import UserRowActions from './UserRowActions.vue'
 import UserRowMixin from '../../mixins/UserRowMixin.js'
+
 export default {
 	name: 'UserRowSimple',
 	components: {
-		NcPopoverMenu,
-		NcActionButton,
-		NcActions,
+		UserRowActions,
 	},
 	directives: {
 		ClickOutside,
@@ -124,10 +105,6 @@ export default {
 			type: Boolean,
 			required: true,
 		},
-		feedbackMessage: {
-			type: String,
-			required: true,
-		},
 		subAdminsGroups: {
 			type: Array,
 			required: true,