From 51ec656a064a1c0784098a5ef738b2e6cdd74ab7 Mon Sep 17 00:00:00 2001
From: Azri Kahar <42867097+azrikahar@users.noreply.github.com>
Date: Wed, 23 Mar 2022 23:09:08 +0800
Subject: [PATCH] disable actions based on permissions (#12316)

---
 app/src/components/v-button/v-button.vue      |  4 ++--
 app/src/modules/insights/routes/dashboard.vue | 18 ++++++++++++++++--
 app/src/modules/insights/routes/overview.vue  | 14 ++++++++++++--
 3 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/app/src/components/v-button/v-button.vue b/app/src/components/v-button/v-button.vue
index fd99405b6e..244b114902 100644
--- a/app/src/components/v-button/v-button.vue
+++ b/app/src/components/v-button/v-button.vue
@@ -340,8 +340,8 @@ export default defineComponent({
 	background-color: transparent;
 }
 
-.outlined:not(.active):focus,
-.outlined:not(.active):hover {
+.outlined:not(.active):not(:disabled):focus,
+.outlined:not(.active):not(:disabled):hover {
 	color: var(--v-button-background-color-hover);
 	background-color: transparent;
 	border-color: var(--v-button-background-color-hover);
diff --git a/app/src/modules/insights/routes/dashboard.vue b/app/src/modules/insights/routes/dashboard.vue
index bd7cd790f7..186abfc7a3 100644
--- a/app/src/modules/insights/routes/dashboard.vue
+++ b/app/src/modules/insights/routes/dashboard.vue
@@ -58,7 +58,15 @@
 					<v-icon name="fullscreen" />
 				</v-button>
 
-				<v-button v-tooltip.bottom="t('edit_panels')" rounded icon outlined @click="editMode = !editMode">
+				<v-button
+					v-tooltip.bottom="t('edit_panels')"
+					class="edit"
+					rounded
+					icon
+					outlined
+					:disabled="!updateAllowed"
+					@click="editMode = !editMode"
+				>
 					<v-icon name="edit" />
 				</v-button>
 			</template>
@@ -146,7 +154,7 @@
 <script lang="ts">
 import InsightsNavigation from '../components/navigation.vue';
 import { defineComponent, computed, ref, toRefs, watch } from 'vue';
-import { useInsightsStore, useAppStore } from '@/stores';
+import { useInsightsStore, useAppStore, usePermissionsStore } from '@/stores';
 import InsightsNotFound from './not-found.vue';
 import { Panel } from '@directus/shared/types';
 import { nanoid } from 'nanoid';
@@ -179,6 +187,7 @@ export default defineComponent({
 
 		const insightsStore = useInsightsStore();
 		const appStore = useAppStore();
+		const permissionsStore = usePermissionsStore();
 
 		const { fullScreen } = toRefs(appStore);
 
@@ -192,6 +201,10 @@ export default defineComponent({
 
 		const zoomToFit = ref(false);
 
+		const updateAllowed = computed<boolean>(() => {
+			return permissionsStore.hasPermission('directus_panels', 'update');
+		});
+
 		useShortcut('meta+s', () => {
 			saveChanges();
 		});
@@ -305,6 +318,7 @@ export default defineComponent({
 		return {
 			currentDashboard,
 			editMode,
+			updateAllowed,
 			panels,
 			stagePanelEdits,
 			stagedPanels,
diff --git a/app/src/modules/insights/routes/overview.vue b/app/src/modules/insights/routes/overview.vue
index 0a1d3c4b35..d0885b242a 100644
--- a/app/src/modules/insights/routes/overview.vue
+++ b/app/src/modules/insights/routes/overview.vue
@@ -51,7 +51,7 @@
 					</template>
 
 					<v-list>
-						<v-list-item class="warning" clickable @click="editDashboard = item">
+						<v-list-item class="warning" :disabled="!updateAllowed" clickable @click="editDashboard = item">
 							<v-list-item-icon>
 								<v-icon name="edit" />
 							</v-list-item-icon>
@@ -60,7 +60,7 @@
 							</v-list-item-content>
 						</v-list-item>
 
-						<v-list-item class="danger" clickable @click="confirmDelete = item.id">
+						<v-list-item class="danger" :disabled="!deleteAllowed" clickable @click="confirmDelete = item.id">
 							<v-list-item-icon>
 								<v-icon name="delete" />
 							</v-list-item-icon>
@@ -131,6 +131,14 @@ export default defineComponent({
 			return permissionsStore.hasPermission('directus_dashboards', 'create');
 		});
 
+		const updateAllowed = computed<boolean>(() => {
+			return permissionsStore.hasPermission('directus_dashboards', 'update');
+		});
+
+		const deleteAllowed = computed<boolean>(() => {
+			return permissionsStore.hasPermission('directus_dashboards', 'delete');
+		});
+
 		const tableHeaders = [
 			{
 				text: '',
@@ -155,6 +163,8 @@ export default defineComponent({
 		return {
 			dashboards,
 			createAllowed,
+			updateAllowed,
+			deleteAllowed,
 			tableHeaders,
 			navigateToDashboard,
 			createDialogActive,