From ce14638a63459cf092057f0834c543a1a84a1985 Mon Sep 17 00:00:00 2001
From: Pranshu Chittora <pranshu@signoz.io>
Date: Wed, 8 Jun 2022 22:57:34 +0530
Subject: [PATCH 1/2] feat(FE): dashboard edit permission based on RBAC

---
 .../container/GridGraphLayout/GraphLayout.tsx | 31 +++++++++++--------
 frontend/src/utils/permission/index.ts        |  4 ++-
 2 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/frontend/src/container/GridGraphLayout/GraphLayout.tsx b/frontend/src/container/GridGraphLayout/GraphLayout.tsx
index 32b87ee09d..97fee8ec9d 100644
--- a/frontend/src/container/GridGraphLayout/GraphLayout.tsx
+++ b/frontend/src/container/GridGraphLayout/GraphLayout.tsx
@@ -29,12 +29,15 @@ function GraphLayout({
 	const { role } = useSelector<AppState, AppReducer>((state) => state.app);
 	const { isDarkMode } = useSelector<AppState, AppReducer>((state) => state.app);
 
-	const [saveLayout] = useComponentPermission(['save_layout'], role);
+	const [saveLayoutPermission, addPanelPermission] = useComponentPermission(
+		['save_layout', 'add_panel'],
+		role,
+	);
 
 	return (
 		<>
 			<ButtonContainer>
-				{saveLayout && (
+				{saveLayoutPermission && (
 					<Button
 						loading={saveLayoutState.loading}
 						onClick={(): Promise<void> => onLayoutSaveHandler(layouts)}
@@ -45,24 +48,26 @@ function GraphLayout({
 					</Button>
 				)}
 
-				<Button
-					loading={addPanelLoading}
-					disabled={addPanelLoading}
-					onClick={onAddPanelHandler}
-					icon={<PlusOutlined />}
-				>
-					Add Panel
-				</Button>
+				{addPanelPermission && (
+					<Button
+						loading={addPanelLoading}
+						disabled={addPanelLoading}
+						onClick={onAddPanelHandler}
+						icon={<PlusOutlined />}
+					>
+						Add Panel
+					</Button>
+				)}
 			</ButtonContainer>
 
 			<ReactGridLayout
-				isResizable
 				cols={12}
 				rowHeight={100}
 				autoSize
 				width={100}
-				isDraggable
-				isDroppable
+				isDraggable={addPanelPermission}
+				isDroppable={addPanelPermission}
+				isResizable={addPanelPermission}
 				useCSSTransforms
 				allowOverlap={false}
 				onLayoutChange={onLayoutChangeHandler}
diff --git a/frontend/src/utils/permission/index.ts b/frontend/src/utils/permission/index.ts
index a4fe82b395..27fa273703 100644
--- a/frontend/src/utils/permission/index.ts
+++ b/frontend/src/utils/permission/index.ts
@@ -16,7 +16,8 @@ export type ComponentTypes =
 	| 'delete_widget'
 	| 'new_dashboard'
 	| 'new_alert_action'
-	| 'edit_widget';
+	| 'edit_widget'
+	| 'add_panel';
 
 export const componentPermission: Record<ComponentTypes, ROLES[]> = {
 	current_org_settings: ['ADMIN'],
@@ -34,6 +35,7 @@ export const componentPermission: Record<ComponentTypes, ROLES[]> = {
 	new_dashboard: ['ADMIN', 'EDITOR'],
 	new_alert_action: ['ADMIN'],
 	edit_widget: ['ADMIN', 'EDITOR'],
+	add_panel: ['ADMIN', 'EDITOR'],
 };
 
 export const routePermission: Record<keyof typeof ROUTES, ROLES[]> = {

From 052eb25cff48c82f0ea39fcb0c639f6f648fc02f Mon Sep 17 00:00:00 2001
From: Pranshu Chittora <pranshu@signoz.io>
Date: Wed, 8 Jun 2022 23:15:48 +0530
Subject: [PATCH 2/2] chore(FE): sidebar red dot styling

---
 frontend/src/container/SideNav/styles.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/container/SideNav/styles.ts b/frontend/src/container/SideNav/styles.ts
index ae0ed0898b..688356cf7d 100644
--- a/frontend/src/container/SideNav/styles.ts
+++ b/frontend/src/container/SideNav/styles.ts
@@ -66,7 +66,7 @@ export const RedDot = styled.div`
 	background: #d32029;
 	border-radius: 50%;
 
-	margin-left: 1rem;
+	margin-left: 0.5rem;
 	margin-top: 0.5rem;
 `;