From 807bda3dcb962fd8fc7cea7c4327ed900f65685a Mon Sep 17 00:00:00 2001
From: Brainslug <br41nslug@users.noreply.github.com>
Date: Tue, 13 Dec 2022 15:05:14 +0100
Subject: [PATCH] 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
---
 api/src/services/items.test.ts                   |  8 ++++----
 app/src/composables/use-item.ts                  | 10 +++++++---
 .../files/components/navigation-folder.vue       |  2 ++
 .../modules/settings/routes/roles/item/item.vue  |  3 ++-
 .../permissions-detail/permissions-detail.vue    |  6 +++++-
 .../views/private/components/users-invite.vue    |  7 ++++++-
 packages/shared/src/types/query.ts               | 16 +++++++++++++++-
 7 files changed, 41 insertions(+), 11 deletions(-)

diff --git a/api/src/services/items.test.ts b/api/src/services/items.test.ts
index a04a01c924..5c7c75d011 100644
--- a/api/src/services/items.test.ts
+++ b/api/src/services/items.test.ts
@@ -1,4 +1,4 @@
-import { Query } from '@directus/shared/types';
+import { NestedDeepQuery } from '@directus/shared/types';
 import knex, { Knex } from 'knex';
 import { getTracker, MockClient, Tracker } from 'knex-mock-client';
 import { cloneDeep } from 'lodash';
@@ -442,7 +442,7 @@ describe('Integration Tests', () => {
 				});
 				const response = await itemsService.readOne(rawItems[0].id, {
 					fields: ['id', 'items.*'],
-					deep: { items: { _filter: { title: { _eq: childItems[0].title } } } as Query },
+					deep: { items: { _filter: { title: { _eq: childItems[0].title } } } as NestedDeepQuery },
 				});
 
 				expect(tracker.history.select.length).toBe(2);
@@ -532,7 +532,7 @@ describe('Integration Tests', () => {
 					});
 					const response = await itemsService.readOne(rawItems[0].id, {
 						fields: ['id', 'items.*'],
-						deep: { items: { _filter: { title: { _eq: childItems[0].title } } } as Query },
+						deep: { items: { _filter: { title: { _eq: childItems[0].title } } } as NestedDeepQuery },
 					});
 
 					expect(tracker.history.select.length).toBe(2);
@@ -625,7 +625,7 @@ describe('Integration Tests', () => {
 					expect(() =>
 						itemsService.readOne(rawItems[0].id, {
 							fields: ['id', 'items.*'],
-							deep: { items: { _filter: { title: { _eq: childItems[0].title } } } as Query },
+							deep: { items: { _filter: { title: { _eq: childItems[0].title } } } as NestedDeepQuery },
 						})
 					).rejects.toThrow("You don't have permission to access this.");
 					expect(tracker.history.select.length).toBe(0);
diff --git a/app/src/composables/use-item.ts b/app/src/composables/use-item.ts
index 6782966d22..d90b976f4d 100644
--- a/app/src/composables/use-item.ts
+++ b/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;
diff --git a/app/src/modules/files/components/navigation-folder.vue b/app/src/modules/files/components/navigation-folder.vue
index ee792a9fe4..de76952a68 100644
--- a/app/src/modules/files/components/navigation-folder.vue
+++ b/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'],
 						},
 					});
 
diff --git a/app/src/modules/settings/routes/roles/item/item.vue b/app/src/modules/settings/routes/roles/item/item.vue
index 935bbeb81e..26f4aef565 100644
--- a/app/src/modules/settings/routes/roles/item/item.vue
+++ b/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);
diff --git a/app/src/modules/settings/routes/roles/permissions-detail/permissions-detail.vue b/app/src/modules/settings/routes/roles/permissions-detail/permissions-detail.vue
index 8c27bc5f82..56b094d038 100644
--- a/app/src/modules/settings/routes/roles/permissions-detail/permissions-detail.vue
+++ b/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;
 				}
 
diff --git a/app/src/views/private/components/users-invite.vue b/app/src/views/private/components/users-invite.vue
index 032c967422..ba96504fcd 100644
--- a/app/src/views/private/components/users-invite.vue
+++ b/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,
diff --git a/packages/shared/src/types/query.ts b/packages/shared/src/types/query.ts
index 506ae82d24..d4b2b518ae 100644
--- a/packages/shared/src/types/query.ts
+++ b/packages/shared/src/types/query.ts
@@ -11,10 +11,24 @@ export type Query = {
 	export?: 'json' | 'csv' | 'xml' | null;
 	group?: string[] | null;
 	aggregate?: Aggregate | null;
-	deep?: Record<string, Query> | null;
+	deep?: NestedDeepQuery | null;
 	alias?: Record<string, string> | null;
 };
 
+export type DeepQuery = {
+	_fields?: string[] | null;
+	_sort?: string[] | null;
+	_filter?: Filter | null;
+	_limit?: number | null;
+	_offset?: number | null;
+	_page?: number | null;
+	_search?: string | null;
+	_group?: string[] | null;
+	_aggregate?: Aggregate | null;
+};
+
+export type NestedDeepQuery = { [field: string]: DeepQuery | NestedDeepQuery };
+
 /**
  * Aggregate operation. Contains column name, and the field alias it should be returned as
  */