Prevent M2M item edits without permission via app (#12312)

app/src/interfaces/list-m2m/list-m2m.vue

@@ -61,6 +61,7 @@
 			:junction-field="relationInfo.junctionField"
 			:edits="editsAtStart"
 			:circular-field="junction.field"
+			:disabled="!updateAllowed"
 			@input="stageEdits"
 			@update:active="cancelEdit"
 		/>
@@ -224,7 +225,7 @@ export default defineComponent({
 
 		const { sort, sortItems, sortedItems } = useSort(relationInfo, fields, items, emitter);
 
-		const { createAllowed, selectAllowed } = usePermissions(junctionCollection, relationCollection);
+		const { createAllowed, selectAllowed, updateAllowed } = usePermissions(junctionCollection, relationCollection);
 
 		return {
 			t,
@@ -255,6 +256,7 @@ export default defineComponent({
 			templateWithDefaults,
 			createAllowed,
 			selectAllowed,
+			updateAllowed,
 			customFilter,
 		};
 

app/src/interfaces/list-m2m/use-permissions.ts

@@ -2,10 +2,16 @@ import { usePermissionsStore, useUserStore } from '@/stores';
 import { Collection } from '@directus/shared/types';
 import { computed, Ref, ComputedRef } from 'vue';
 
+type UsablePermissions = {
+	createAllowed: ComputedRef<boolean>;
+	selectAllowed: ComputedRef<boolean>;
+	updateAllowed: ComputedRef<boolean>;
+};
+
 export default function usePermissions(
 	junctionCollection: Ref<Collection>,
 	relationCollection: Ref<Collection>
-): { createAllowed: ComputedRef<boolean>; selectAllowed: ComputedRef<boolean> } {
+): UsablePermissions {
 	const permissionsStore = usePermissionsStore();
 	const userStore = useUserStore();
 
@@ -35,5 +41,20 @@ export default function usePermissions(
 		return hasJunctionPermissions;
 	});
 
-	return { createAllowed, selectAllowed };
+	const updateAllowed = computed(() => {
+		const admin = userStore.currentUser?.role.admin_access === true;
+		if (admin) return true;
+
+		const hasJunctionPermissions = !!permissionsStore.permissions.find(
+			(permission) => permission.action === 'update' && permission.collection === junctionCollection.value.collection
+		);
+
+		const hasRelatedPermissions = !!permissionsStore.permissions.find(
+			(permission) => permission.action === 'create' && permission.collection === relationCollection.value.collection
+		);
+
+		return hasJunctionPermissions && hasRelatedPermissions;
+	});
+
+	return { createAllowed, selectAllowed, updateAllowed };
 }