Merge pull request #1242 from pranshuchittora/pranshuchittora/feat/dashboard-edit-permission

feat(FE): dashboard edit permission based on RBAC

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}

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;
 `;
 

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[]> = {