From 5caf94f024c2447d04d7609c5e018ecd7cba1ed2 Mon Sep 17 00:00:00 2001
From: palash-signoz <palash@signoz.io>
Date: Wed, 4 May 2022 01:31:44 +0530
Subject: [PATCH] feat: permission is added in the dashboard button (#1051)

---
 .../src/container/GridGraphLayout/index.tsx   | 27 ++++++++++++-------
 .../DescriptionOfDashboard/index.tsx          | 18 ++++++++-----
 frontend/src/utils/permission/index.ts        |  6 ++++-
 3 files changed, 34 insertions(+), 17 deletions(-)

diff --git a/frontend/src/container/GridGraphLayout/index.tsx b/frontend/src/container/GridGraphLayout/index.tsx
index 38ff0e6d1f..48d51fd7f0 100644
--- a/frontend/src/container/GridGraphLayout/index.tsx
+++ b/frontend/src/container/GridGraphLayout/index.tsx
@@ -4,10 +4,12 @@ import { notification } from 'antd';
 import updateDashboardApi from 'api/dashboard/update';
 import Spinner from 'components/Spinner';
 import { GRAPH_TYPES } from 'container/NewDashboard/ComponentsSlider';
+import useComponentPermission from 'hooks/useComponentPermission';
 import React, { memo, useCallback, useEffect, useRef, useState } from 'react';
 import { Layout } from 'react-grid-layout';
 import { useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
+import AppReducer from 'types/reducer/app';
 import DashboardReducer from 'types/reducer/dashboards';
 import { v4 } from 'uuid';
 
@@ -42,6 +44,9 @@ function GridGraph(): JSX.Element {
 
 	const isMounted = useRef(true);
 	const isDeleted = useRef(false);
+	const { role } = useSelector<AppState, AppReducer>((state) => state.app);
+
+	const [saveLayout] = useComponentPermission(['save_layout'], role);
 
 	const getPreLayouts: () => LayoutProps[] = useCallback(() => {
 		if (widgets === undefined) {
@@ -213,16 +218,18 @@ function GridGraph(): JSX.Element {
 
 	return (
 		<>
-			<ButtonContainer>
-				<Button
-					loading={saveLayoutState.loading}
-					onClick={onLayoutSaveHandler}
-					icon={<SaveFilled />}
-					danger={saveLayoutState.error}
-				>
-					Save Layout
-				</Button>
-			</ButtonContainer>
+			{saveLayout && (
+				<ButtonContainer>
+					<Button
+						loading={saveLayoutState.loading}
+						onClick={onLayoutSaveHandler}
+						icon={<SaveFilled />}
+						danger={saveLayoutState.error}
+					>
+						Save Layout
+					</Button>
+				</ButtonContainer>
+			)}
 
 			<ReactGridLayout
 				isResizable
diff --git a/frontend/src/container/NewDashboard/DescriptionOfDashboard/index.tsx b/frontend/src/container/NewDashboard/DescriptionOfDashboard/index.tsx
index 7d3227b731..bcaa553e62 100644
--- a/frontend/src/container/NewDashboard/DescriptionOfDashboard/index.tsx
+++ b/frontend/src/container/NewDashboard/DescriptionOfDashboard/index.tsx
@@ -6,6 +6,7 @@ import {
 import { Card, Col, Row, Space, Tag, Typography } from 'antd';
 import AddTags from 'container/NewDashboard/DescriptionOfDashboard/AddTags';
 import NameOfTheDashboard from 'container/NewDashboard/DescriptionOfDashboard/NameOfTheDashboard';
+import useComponentPermission from 'hooks/useComponentPermission';
 import React, { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { connect, useSelector } from 'react-redux';
@@ -18,6 +19,7 @@ import {
 } from 'store/actions';
 import { AppState } from 'store/reducers';
 import AppActions from 'types/actions';
+import AppReducer from 'types/reducer/app';
 import DashboardReducer from 'types/reducer/dashboards';
 
 import Description from './Description';
@@ -46,6 +48,8 @@ function DescriptionOfDashboard({
 	const [isJSONModalVisible, isIsJSONModalVisible] = useState<boolean>(false);
 
 	const { t } = useTranslation('common');
+	const { role } = useSelector<AppState, AppReducer>((state) => state.app);
+	const [editDashboard] = useComponentPermission(['edit_dashboard'], role);
 
 	const onClickEditHandler = useCallback(() => {
 		if (isEditMode) {
@@ -118,12 +122,14 @@ function DescriptionOfDashboard({
 						<Button onClick={onToggleHandler} icon={<ShareAltOutlined />}>
 							{t('share')}
 						</Button>
-						<Button
-							icon={!isEditMode ? <EditOutlined /> : <SaveOutlined />}
-							onClick={onClickEditHandler}
-						>
-							{isEditMode ? t('save') : t('edit')}
-						</Button>
+						{editDashboard && (
+							<Button
+								icon={!isEditMode ? <EditOutlined /> : <SaveOutlined />}
+								onClick={onClickEditHandler}
+							>
+								{isEditMode ? t('save') : t('edit')}
+							</Button>
+						)}
 					</Space>
 				</Col>
 			</Row>
diff --git a/frontend/src/utils/permission/index.ts b/frontend/src/utils/permission/index.ts
index cb85c997ba..c5299ddb4c 100644
--- a/frontend/src/utils/permission/index.ts
+++ b/frontend/src/utils/permission/index.ts
@@ -10,7 +10,9 @@ export type ComponentTypes =
 	| 'add_new_alert'
 	| 'add_new_channel'
 	| 'set_retention_period'
-	| 'action';
+	| 'action'
+	| 'save_layout'
+	| 'edit_dashboard';
 
 export const componentPermission: Record<ComponentTypes, ROLES[]> = {
 	current_org_settings: ['ADMIN'],
@@ -22,6 +24,8 @@ export const componentPermission: Record<ComponentTypes, ROLES[]> = {
 	add_new_channel: ['ADMIN'],
 	set_retention_period: ['ADMIN'],
 	action: ['ADMIN', 'EDITOR'],
+	save_layout: ['ADMIN', 'EDITOR'],
+	edit_dashboard: ['ADMIN', 'EDITOR'],
 };
 
 export const routePermission: Record<keyof typeof ROUTES, ROLES[]> = {