feat(FE): dashboard edit permission based on RBAC

This commit is contained in:
Pranshu Chittora 2022-06-08 22:57:34 +05:30
parent fa142707dc
commit ce14638a63
No known key found for this signature in database
GPG Key ID: 3A9E57A016CC0626
2 changed files with 21 additions and 14 deletions

View File

@ -29,12 +29,15 @@ function GraphLayout({
const { role } = useSelector<AppState, AppReducer>((state) => state.app); const { role } = useSelector<AppState, AppReducer>((state) => state.app);
const { isDarkMode } = 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 ( return (
<> <>
<ButtonContainer> <ButtonContainer>
{saveLayout && ( {saveLayoutPermission && (
<Button <Button
loading={saveLayoutState.loading} loading={saveLayoutState.loading}
onClick={(): Promise<void> => onLayoutSaveHandler(layouts)} onClick={(): Promise<void> => onLayoutSaveHandler(layouts)}
@ -45,24 +48,26 @@ function GraphLayout({
</Button> </Button>
)} )}
<Button {addPanelPermission && (
loading={addPanelLoading} <Button
disabled={addPanelLoading} loading={addPanelLoading}
onClick={onAddPanelHandler} disabled={addPanelLoading}
icon={<PlusOutlined />} onClick={onAddPanelHandler}
> icon={<PlusOutlined />}
Add Panel >
</Button> Add Panel
</Button>
)}
</ButtonContainer> </ButtonContainer>
<ReactGridLayout <ReactGridLayout
isResizable
cols={12} cols={12}
rowHeight={100} rowHeight={100}
autoSize autoSize
width={100} width={100}
isDraggable isDraggable={addPanelPermission}
isDroppable isDroppable={addPanelPermission}
isResizable={addPanelPermission}
useCSSTransforms useCSSTransforms
allowOverlap={false} allowOverlap={false}
onLayoutChange={onLayoutChangeHandler} onLayoutChange={onLayoutChangeHandler}

View File

@ -16,7 +16,8 @@ export type ComponentTypes =
| 'delete_widget' | 'delete_widget'
| 'new_dashboard' | 'new_dashboard'
| 'new_alert_action' | 'new_alert_action'
| 'edit_widget'; | 'edit_widget'
| 'add_panel';
export const componentPermission: Record<ComponentTypes, ROLES[]> = { export const componentPermission: Record<ComponentTypes, ROLES[]> = {
current_org_settings: ['ADMIN'], current_org_settings: ['ADMIN'],
@ -34,6 +35,7 @@ export const componentPermission: Record<ComponentTypes, ROLES[]> = {
new_dashboard: ['ADMIN', 'EDITOR'], new_dashboard: ['ADMIN', 'EDITOR'],
new_alert_action: ['ADMIN'], new_alert_action: ['ADMIN'],
edit_widget: ['ADMIN', 'EDITOR'], edit_widget: ['ADMIN', 'EDITOR'],
add_panel: ['ADMIN', 'EDITOR'],
}; };
export const routePermission: Record<keyof typeof ROUTES, ROLES[]> = { export const routePermission: Record<keyof typeof ROUTES, ROLES[]> = {