fix(settings): Migrate away from deprecated `NcPopoverMenu`

* Replace popover menu with `NcActions`
* Deduplicate user actions code between `UserRow` and `UserRowSimple`
* Fix user action to cover whole row heigh to prevent dropdown from shining through the actions
* Fix user action popover to be overlayed by current edited row actions

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

1 files changed, 78 insertions, 0 deletions

diff --git a/apps/settings/src/components/Users/UserRowActions.vue b/apps/settings/src/components/Users/UserRowActions.vue
new file mode 100644
index 00000000000..ad89528fda7
--- /dev/null
+++ b/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>