Allow cancelling the creation of custom permissions (#7459)

* remove custom permissions if they are empty

* Add return type

Co-authored-by: Rijk van Zanten <rijkvanzanten@me.com>

app/src/modules/settings/routes/roles/item/components/permissions-overview-toggle.vue

@@ -111,18 +111,9 @@ export default defineComponent({
 
 		const permissionLevel = computed<'all' | 'none' | 'custom'>(() => {
 			if (permission.value === undefined) return 'none';
-			if (hasAll() === true) return 'all';
+			if (permission.value.fields?.includes('*')) return 'all';
 
 			return 'custom';
-
-			function hasAll() {
-				if (!permission.value) return false;
-				if (permission.value.fields?.includes('*') === false) return false;
-				if (Object.keys(permission.value.permissions || {}).length > 0) return false;
-				if (Object.keys(permission.value.validation || {}).length > 0) return false;
-
-				return true;
-			}
 		});
 
 		const saving = ref(false);

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

@@ -13,6 +13,7 @@ import { Permission } from '@directus/shared/types';
 import api from '@/api';
 import { useRouter } from 'vue-router';
 import { unexpectedError } from '@/utils/unexpected-error';
+import { isPermissionEmpty } from '@/utils/is-permission-empty';
 
 export default defineComponent({
 	props: {
@@ -39,7 +40,12 @@ export default defineComponent({
 			loading.value = true;
 
 			try {
-				await api.patch(`/permissions/${props.permission.id}`, props.permission);
+				if (isPermissionEmpty(props.permission)) {
+					await api.delete(`/permissions/${props.permission.id}`);
+				} else {
+					await api.patch(`/permissions/${props.permission.id}`, props.permission);
+				}
+
 				emit('refresh');
 				router.push(`/settings/roles/${props.roleKey || 'public'}`);
 			} catch (err) {

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

@@ -79,17 +79,10 @@ export default defineComponent({
 			},
 			set(newFields: string[] | null) {
 				if (newFields && newFields.length > 0) {
-					if (newFields.length === fieldsInCollection.value.length) {
-						internalPermission.value = {
-							...internalPermission.value,
-							fields: ['*'],
-						};
-					} else {
-						internalPermission.value = {
-							...internalPermission.value,
-							fields: newFields,
-						};
-					}
+					internalPermission.value = {
+						...internalPermission.value,
+						fields: newFields,
+					};
 				} else {
 					internalPermission.value = {
 						...internalPermission.value,

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

@@ -39,7 +39,7 @@
 		</div>
 
 		<template v-if="!loading" #actions>
-			<actions :role-key="roleKey" :permission="permission" @refresh="$emit('refresh', +permissionKey)" />
+			<actions :role-key="roleKey" :permission="permission" @refresh="$emit('refresh', Number(permissionKey))" />
 		</template>
 	</v-drawer>
 </template>
@@ -61,6 +61,7 @@ import Presets from './components/presets.vue';
 import { unexpectedError } from '@/utils/unexpected-error';
 import { appMinimalPermissions } from '../app-permissions';
 import { useDialogRoute } from '@/composables/use-dialog-route';
+import { isPermissionEmpty } from '@/utils/is-permission-empty';
 
 export default defineComponent({
 	components: { Actions, Tabs, Permissions, Fields, Validation, Presets },
@@ -175,7 +176,11 @@ export default defineComponent({
 
 		return { isOpen, permission, role, loading, modalTitle, tabs, currentTab, currentTabInfo, appMinimal, close };
 
-		function close() {
+		async function close() {
+			if (permission.value && isPermissionEmpty(permission.value)) {
+				await api.delete(`/permissions/${permission.value.id}`);
+			}
+
 			router.push(`/settings/roles/${props.roleKey || 'public'}`);
 		}
 

app/src/utils/is-permission-empty.ts

@@ -0,0 +1,9 @@
+import { Permission } from '../../../packages/shared/types';
+
+export function isPermissionEmpty(perm: Permission): boolean {
+	return (
+		(perm.fields || []).length === 0 &&
+		Object.keys(perm.validation || {}).length === 0 &&
+		Object.keys(perm.presets || {}).length === 0
+	);
+}