delete widget is added for admin and editor (#1066)

frontend/src/container/GridGraphLayout/WidgetHeader/index.tsx

@@ -5,9 +5,13 @@ import {
 	FullscreenOutlined,
 } from '@ant-design/icons';
 import { Dropdown, Menu, Typography } from 'antd';
+import useComponentPermission from 'hooks/useComponentPermission';
 import history from 'lib/history';
 import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import { AppState } from 'store/reducers';
 import { Widgets } from 'types/api/dashboard/getAll';
+import AppReducer from 'types/reducer/app';
 
 import {
 	ArrowContainer,
@@ -59,6 +63,9 @@ function WidgetHeader({
 	const onMenuItemSelectHandler = ({ key }: { key: TWidgetOptions }): void => {
 		keyMethodMapping[key]?.method();
 	};
+	const { role } = useSelector<AppState, AppReducer>((state) => state.app);
+
+	const [deleteWidget] = useComponentPermission(['delete_widget'], role);
 
 	const menu = (
 		<Menu onClick={onMenuItemSelectHandler}>
@@ -72,12 +79,17 @@ function WidgetHeader({
 					<span>Edit</span> <EditFilled />
 				</MenuItemContainer>
 			</Menu.Item>
+
+			{deleteWidget && (
+				<>
 					<Menu.Divider />
 					<Menu.Item key={keyMethodMapping.delete.key} danger>
 						<MenuItemContainer>
 							<span>Delete</span> <DeleteOutlined />
 						</MenuItemContainer>
 					</Menu.Item>
+				</>
+			)}
 		</Menu>
 	);
 

frontend/src/utils/permission/index.ts

@@ -12,7 +12,8 @@ export type ComponentTypes =
 	| 'set_retention_period'
 	| 'action'
 	| 'save_layout'
-	| 'edit_dashboard';
+	| 'edit_dashboard'
+	| 'delete_widget';
 
 export const componentPermission: Record<ComponentTypes, ROLES[]> = {
 	current_org_settings: ['ADMIN'],
@@ -26,6 +27,7 @@ export const componentPermission: Record<ComponentTypes, ROLES[]> = {
 	action: ['ADMIN', 'EDITOR'],
 	save_layout: ['ADMIN', 'EDITOR'],
 	edit_dashboard: ['ADMIN', 'EDITOR'],
+	delete_widget: ['ADMIN', 'EDITOR'],
 };
 
 export const routePermission: Record<keyof typeof ROUTES, ROLES[]> = {