add click event for user tooltip & go to user page (#7954)

app/src/views/private/components/user-popover/user-popover.vue

@@ -15,7 +15,7 @@
 			{{ error }}
 		</div>
 
-		<div v-else-if="data" class="user-box">
+		<div v-else-if="data" class="user-box" @click.stop="navigateToUser">
 			<v-avatar x-large class="avatar">
 				<img v-if="avatarSrc" :src="avatarSrc" :alt="data.first_name" />
 				<v-icon v-else name="person" outline />
@@ -36,15 +36,8 @@ import api from '@/api';
 import { getRootPath } from '@/utils/get-root-path';
 import { userName } from '@/utils/user-name';
 import { addTokenToURL } from '@/api';
-
-type User = {
-	first_name: string;
-	last_name: string;
-	email: string;
-	avatar: {
-		id: string;
-	};
-};
+import { useRouter } from 'vue-router';
+import { User } from '@directus/shared/types';
 
 export default defineComponent({
 	props: {
@@ -56,6 +49,8 @@ export default defineComponent({
 	setup(props) {
 		const { t } = useI18n();
 
+		const router = useRouter();
+
 		const loading = ref(false);
 		const error = ref(null);
 		const data = ref<User | null>(null);
@@ -83,7 +78,7 @@ export default defineComponent({
 			data.value = null;
 		});
 
-		return { t, loading, error, data, active, avatarSrc, userName };
+		return { t, loading, error, data, active, avatarSrc, userName, navigateToUser };
 
 		async function fetchUser() {
 			loading.value = true;
@@ -92,7 +87,7 @@ export default defineComponent({
 			try {
 				const response = await api.get(`/users/${props.user}`, {
 					params: {
-						fields: ['email', 'first_name', 'last_name', 'avatar.id', 'role.name', 'status', 'email'],
+						fields: ['id', 'first_name', 'last_name', 'avatar.id', 'role.name', 'status', 'email'],
 					},
 				});
 				data.value = response.data.data;
@@ -102,6 +97,10 @@ export default defineComponent({
 				loading.value = false;
 			}
 		}
+
+		function navigateToUser() {
+			if (data.value) router.push(`/users/${data.value.id}`);
+		}
 	},
 });
 </script>
@@ -114,8 +113,8 @@ export default defineComponent({
 .user-box {
 	display: flex;
 	min-width: 300px;
-	height: 80px;
-	margin: 8px 4px;
+	padding: 8px 4px;
+	cursor: pointer;
 
 	.v-avatar {
 		margin-right: 16px;