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

feat(FE): dashboard edit permission based on RBAC
This commit is contained in:
palash-signoz 2022-06-08 23:25:21 +05:30 committed by GitHub
commit 4aa4bf9ea2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 22 additions and 15 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,6 +48,7 @@ function GraphLayout({
</Button> </Button>
)} )}
{addPanelPermission && (
<Button <Button
loading={addPanelLoading} loading={addPanelLoading}
disabled={addPanelLoading} disabled={addPanelLoading}
@ -53,16 +57,17 @@ function GraphLayout({
> >
Add Panel Add Panel
</Button> </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

@ -66,7 +66,7 @@ export const RedDot = styled.div`
background: #d32029; background: #d32029;
border-radius: 50%; border-radius: 50%;
margin-left: 1rem; margin-left: 0.5rem;
margin-top: 0.5rem; margin-top: 0.5rem;
`; `;

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