Hide delete action for last admin role (#11793)

app/src/modules/insights/routes/panel-configuration.vue

@@ -81,7 +81,7 @@
 
 <script lang="ts">
 import ExtensionOptions from '../../settings/routes/data-model/field-detail/shared/extension-options.vue';
-import { computed, defineComponent, reactive, watch, PropType, ref } from 'vue';
+import { computed, defineComponent, reactive, watch, PropType } from 'vue';
 import { getPanels, getPanel } from '@/panels';
 import { FancySelectItem } from '@/components/v-fancy-select/types';
 import { Panel } from '@directus/shared/types';

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

@@ -72,6 +72,8 @@ type Role = {
 	id: number;
 	name: string;
 	description: string;
+	icon: string;
+	admin_access: boolean;
 	count: number;
 };
 
@@ -87,6 +89,11 @@ export default defineComponent({
 		const roles = ref<Role[]>([]);
 		const loading = ref(false);
 
+		const lastAdminRoleId = computed(() => {
+			const adminRoles = roles.value.filter((role) => role.admin_access === true);
+			return adminRoles.length === 1 ? adminRoles[0].id : null;
+		});
+
 		const tableHeaders: TableHeader[] = [
 			{
 				text: '',
@@ -133,7 +140,7 @@ export default defineComponent({
 				const response = await api.get(`/roles`, {
 					params: {
 						limit: -1,
-						fields: ['id', 'name', 'description', 'icon', 'users'],
+						fields: ['id', 'name', 'description', 'icon', 'admin_access', 'users'],
 						deep: {
 							users: {
 								_aggregate: { count: 'id' },
@@ -169,7 +176,12 @@ export default defineComponent({
 		}
 
 		function navigateToRole({ item }: { item: Role }) {
-			router.push(`/settings/roles/${item.id}`);
+			router.push({
+				name: 'settings-roles-item',
+				params: lastAdminRoleId.value
+					? { primaryKey: item.id, lastAdminRoleId: lastAdminRoleId.value }
+					: { primaryKey: item.id },
+			});
 		}
 	},
 });

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

@@ -12,6 +12,7 @@
 			<v-dialog v-if="[1, 2].includes(+primaryKey) === false" v-model="confirmDelete" @esc="confirmDelete = false">
 				<template #activator="{ on }">
 					<v-button
+						v-if="primaryKey !== lastAdminRoleId"
 						v-tooltip.bottom="t('delete_label')"
 						rounded
 						icon
@@ -129,6 +130,10 @@ export default defineComponent({
 			type: String,
 			default: null,
 		},
+		lastAdminRoleId: {
+			type: String,
+			default: null,
+		},
 	},
 	setup(props) {
 		const { t } = useI18n();