Follow up user Roles not loading (#16278)

* applied the same role fix too users invite

* added same fix when saving permissions

* Prevent loading users unecessarily on the permission page

* Added proper `deep` query typing

* fixed typing for tests

* apply similar fix for navigation folder

app/src/composables/use-item.ts

@@ -14,7 +14,7 @@ import { AxiosResponse } from 'axios';
 import { merge } from 'lodash';
 import { computed, ComputedRef, Ref, ref, watch } from 'vue';
 import { usePermissions } from './use-permissions';
-import { Field, Relation } from '@directus/shared/types';
+import { Field, Query, Relation } from '@directus/shared/types';
 import { getDefaultValuesFromFields } from '@/utils/get-default-values-from-fields';
 
 type UsableItem = {
@@ -38,7 +38,11 @@ type UsableItem = {
 	validationErrors: Ref<any[]>;
 };
 
-export function useItem(collection: Ref<string>, primaryKey: Ref<string | number | null>): UsableItem {
+export function useItem(
+	collection: Ref<string>,
+	primaryKey: Ref<string | number | null>,
+	query: Query = {}
+): UsableItem {
 	const { info: collectionInfo, primaryKeyField } = useCollection(collection);
 	const item = ref<Record<string, any> | null>(null);
 	const error = ref<any>(null);
@@ -103,7 +107,7 @@ export function useItem(collection: Ref<string>, primaryKey: Ref<string | number
 		error.value = null;
 
 		try {
-			const response = await api.get(itemEndpoint.value);
+			const response = await api.get(itemEndpoint.value, { params: query });
 			setItemValueToResponse(response);
 		} catch (err: any) {
 			error.value = err;

app/src/modules/files/components/navigation-folder.vue

@@ -230,6 +230,7 @@ export default defineComponent({
 									_eq: props.folder.id,
 								},
 							},
+							fields: ['id'],
 						},
 					});
 
@@ -240,6 +241,7 @@ export default defineComponent({
 									_eq: props.folder.id,
 								},
 							},
+							fields: ['id'],
 						},
 					});
 

app/src/modules/settings/routes/roles/item/item.vue

@@ -152,7 +152,8 @@ export default defineComponent({
 
 		const { edits, hasEdits, item, saving, loading, error, save, remove, deleting, isBatch } = useItem(
 			ref('directus_roles'),
-			primaryKey
+			primaryKey,
+			{ deep: { users: { _limit: 0 } } }
 		);
 
 		const confirmDelete = ref(false);

app/src/modules/settings/routes/roles/permissions-detail/permissions-detail.vue

@@ -190,7 +190,11 @@ export default defineComponent({
 
 			try {
 				if (props.roleKey) {
-					const response = await api.get(`/roles/${props.roleKey}`);
+					const response = await api.get(`/roles/${props.roleKey}`, {
+						params: {
+							deep: { users: { _limit: 0 } },
+						},
+					});
 					role.value = response.data.data;
 				}
 

app/src/views/private/components/users-invite.vue

@@ -112,7 +112,12 @@ export default defineComponent({
 		}
 
 		async function loadRoles() {
-			const response = await api.get('/roles');
+			const response = await api.get('/roles', {
+				params: {
+					sort: 'name',
+					fields: ['id', 'name'],
+				},
+			});
 
 			roles.value = response.data.data.map((role: Record<string, any>) => ({
 				text: role.name,