feat: permission is added in the dashboard button (#1051)

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

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>

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