From 1f4f281965594742f1039b7b8a090bc273d43c2f Mon Sep 17 00:00:00 2001
From: Pranshu Chittora <pranshu@signoz.io>
Date: Thu, 9 Jun 2022 12:04:47 +0530
Subject: [PATCH] feat(FE): save dashbaord with RBAC permissions

---
 .../src/container/GridGraphLayout/index.tsx   | 59 +++++++++++--------
 frontend/src/utils/permission/index.ts        |  2 +-
 2 files changed, 35 insertions(+), 26 deletions(-)

diff --git a/frontend/src/container/GridGraphLayout/index.tsx b/frontend/src/container/GridGraphLayout/index.tsx
index 73fb17f759..88250f3b7c 100644
--- a/frontend/src/container/GridGraphLayout/index.tsx
+++ b/frontend/src/container/GridGraphLayout/index.tsx
@@ -1,6 +1,7 @@
 /* eslint-disable react/no-unstable-nested-components */
 import { notification } from 'antd';
 import updateDashboardApi from 'api/dashboard/update';
+import useComponentPermission from 'hooks/useComponentPermission';
 import React, { useCallback, useEffect, useState } from 'react';
 import { Layout } from 'react-grid-layout';
 import { useTranslation } from 'react-i18next';
@@ -15,6 +16,7 @@ import { AppState } from 'store/reducers';
 import AppActions from 'types/actions';
 import { UPDATE_DASHBOARD } from 'types/actions/dashboard';
 import { Dashboard, Widgets } from 'types/api/dashboard/getAll';
+import AppReducer from 'types/reducer/app';
 import DashboardReducer from 'types/reducer/dashboards';
 
 import Graph from './Graph';
@@ -49,6 +51,9 @@ function GridGraph(props: Props): JSX.Element {
 	const { dashboards, isAddWidget } = useSelector<AppState, DashboardReducer>(
 		(state) => state.dashboards,
 	);
+	const { role } = useSelector<AppState, AppReducer>((state) => state.app);
+
+	const [saveLayoutPermission] = useComponentPermission(['save_layout'], role);
 	const [saveLayoutState, setSaveLayoutState] = useState<State>({
 		loading: false,
 		error: false,
@@ -109,31 +114,34 @@ function GridGraph(props: Props): JSX.Element {
 					loading: true,
 				}));
 
-				const response = await updateDashboardApi({
-					data: {
-						title: data.title,
-						description: data.description,
-						name: data.name,
-						tags: data.tags,
-						widgets: data.widgets,
-						layout,
-					},
-					uuid: selectedDashboard.uuid,
-				});
-				if (response.statusCode === 200) {
-					setSaveLayoutState((state) => ({
-						...state,
-						error: false,
-						errorMessage: '',
-						loading: false,
-					}));
-				} else {
-					setSaveLayoutState((state) => ({
-						...state,
-						error: true,
-						errorMessage: response.error || 'Something went wrong',
-						loading: false,
-					}));
+				// Save layout only when users has the has the permission to do so.
+				if (saveLayoutPermission) {
+					const response = await updateDashboardApi({
+						data: {
+							title: data.title,
+							description: data.description,
+							name: data.name,
+							tags: data.tags,
+							widgets: data.widgets,
+							layout,
+						},
+						uuid: selectedDashboard.uuid,
+					});
+					if (response.statusCode === 200) {
+						setSaveLayoutState((state) => ({
+							...state,
+							error: false,
+							errorMessage: '',
+							loading: false,
+						}));
+					} else {
+						setSaveLayoutState((state) => ({
+							...state,
+							error: true,
+							errorMessage: response.error || 'Something went wrong',
+							loading: false,
+						}));
+					}
 				}
 			} catch (error) {
 				console.error(error);
@@ -145,6 +153,7 @@ function GridGraph(props: Props): JSX.Element {
 			data.tags,
 			data.title,
 			data.widgets,
+			saveLayoutPermission,
 			selectedDashboard.uuid,
 		],
 	);
diff --git a/frontend/src/utils/permission/index.ts b/frontend/src/utils/permission/index.ts
index 27fa273703..6f12d43225 100644
--- a/frontend/src/utils/permission/index.ts
+++ b/frontend/src/utils/permission/index.ts
@@ -49,7 +49,7 @@ export const routePermission: Record<keyof typeof ROUTES, ROLES[]> = {
 	APPLICATION: ['ADMIN', 'EDITOR', 'VIEWER'],
 	CHANNELS_EDIT: ['ADMIN'],
 	CHANNELS_NEW: ['ADMIN'],
-	DASHBOARD: ['ADMIN', 'EDITOR', 'EDITOR'],
+	DASHBOARD: ['ADMIN', 'EDITOR', 'VIEWER'],
 	DASHBOARD_WIDGET: ['ADMIN', 'EDITOR', 'VIEWER'],
 	EDIT_ALERTS: ['ADMIN'],
 	ERROR_DETAIL: ['ADMIN', 'EDITOR', 'VIEWER'],