From b9db7952fb669af7a79c09773141c8f3445bbb13 Mon Sep 17 00:00:00 2001 From: Fredrik Strand Oseberg Date: Fri, 11 Nov 2022 11:04:59 +0100 Subject: [PATCH] feat: add permission buttons for change requests (#2392) * Adds permission buttons for change requests --- .../ChangeRequestOverview.tsx | 39 ++++- .../ReviewButton/ReviewButton.tsx | 20 ++- .../PermissionButton/PermissionButton.tsx | 145 ++++++++++-------- 3 files changed, 127 insertions(+), 77 deletions(-) diff --git a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestOverview.tsx b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestOverview.tsx index 6d5738cd03..0d6eab7467 100644 --- a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestOverview.tsx +++ b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestOverview.tsx @@ -1,5 +1,5 @@ -import { FormControlLabel, styled, Switch } from '@mui/material'; -import { FC } from 'react'; +import { Alert, styled } from '@mui/material'; +import { FC, useContext } from 'react'; import { Box } from '@mui/material'; import { useChangeRequest } from 'hooks/api/getters/useChangeRequest/useChangeRequest'; import { ChangeRequestHeader } from './ChangeRequestHeader/ChangeRequestHeader'; @@ -12,10 +12,13 @@ import { ChangeRequestReviewStatus } from './ChangeRequestReviewStatus/ChangeReq import useToast from 'hooks/useToast'; import { formatUnknownError } from 'utils/formatUnknownError'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; -import Button from '@mui/material/Button'; import Paper from '@mui/material/Paper'; import { ReviewButton } from './ReviewButton/ReviewButton'; import { ChangeRequestReviewer } from './ChangeRequestReviewers/ChangeRequestReviewer'; +import PermissionButton from 'component/common/PermissionButton/PermissionButton'; +import { APPLY_CHANGE_REQUEST } from 'component/providers/AccessProvider/permissions'; +import { useAuthUser } from 'hooks/api/getters/useAuth/useAuthUser'; +import AccessContext from 'contexts/AccessContext'; const StyledAsideBox = styled(Box)(({ theme }) => ({ width: '30%', @@ -43,6 +46,9 @@ const StyledInnerContainer = styled(Box)(({ theme }) => ({ export const ChangeRequestOverview: FC = () => { const projectId = useRequiredPathParam('projectId'); + const { user } = useAuthUser(); + const { isAdmin } = useContext(AccessContext); + const id = useRequiredPathParam('id'); const { data: changeRequest, refetchChangeRequest } = useChangeRequest( projectId, @@ -71,6 +77,11 @@ export const ChangeRequestOverview: FC = () => { } }; + const isSelfReview = + changeRequest?.createdBy.id === user?.id && + changeRequest.state === 'In review' && + !isAdmin; + return ( <> @@ -98,6 +109,19 @@ export const ChangeRequestOverview: FC = () => { Changes + ({ + marginTop: theme.spacing(1.5), + })} + severity="info" + > + You can not approve your own change request + + } + /> @@ -109,12 +133,17 @@ export const ChangeRequestOverview: FC = () => { Apply changes - + } /> diff --git a/frontend/src/component/changeRequest/ChangeRequestOverview/ReviewButton/ReviewButton.tsx b/frontend/src/component/changeRequest/ChangeRequestOverview/ReviewButton/ReviewButton.tsx index 3c4af76c49..bced57aa2a 100644 --- a/frontend/src/component/changeRequest/ChangeRequestOverview/ReviewButton/ReviewButton.tsx +++ b/frontend/src/component/changeRequest/ChangeRequestOverview/ReviewButton/ReviewButton.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useContext } from 'react'; import { useRequiredPathParam } from 'hooks/useRequiredPathParam'; import { useChangeRequest } from 'hooks/api/getters/useChangeRequest/useChangeRequest'; import { useChangeRequestApi } from 'hooks/api/actions/useChangeRequestApi/useChangeRequestApi'; @@ -6,21 +6,27 @@ import { formatUnknownError } from 'utils/formatUnknownError'; import useToast from 'hooks/useToast'; import { - Button, Grow, Paper, Popper, MenuItem, MenuList, ClickAwayListener, + Alert, } from '@mui/material'; import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown'; +import { APPROVE_CHANGE_REQUEST } from 'component/providers/AccessProvider/permissions'; +import PermissionButton from 'component/common/PermissionButton/PermissionButton'; +import { useAuthUser } from 'hooks/api/getters/useAuth/useAuthUser'; +import AccessContext from 'contexts/AccessContext'; export const ReviewButton = () => { + const { isAdmin } = useContext(AccessContext); const projectId = useRequiredPathParam('projectId'); const id = useRequiredPathParam('id'); - const { refetchChangeRequest } = useChangeRequest(projectId, id); + const { user } = useAuthUser(); + const { refetchChangeRequest, data } = useChangeRequest(projectId, id); const { setToastApiError, setToastData } = useToast(); const { changeState } = useChangeRequestApi(); @@ -77,8 +83,9 @@ export const ReviewButton = () => { return ( - + { tooltipProps?: Omit; } -const PermissionButton: React.FC = ({ - permission, - variant = 'contained', - color = 'primary', - onClick, - children, - disabled, - projectId, - environmentId, - tooltipProps, - ...rest -}) => { - const { hasAccess } = useContext(AccessContext); - const id = useId(); - let access; - - const handleAccess = () => { +const PermissionButton: React.FC = React.forwardRef( + ( + { + permission, + variant = 'contained', + color = 'primary', + onClick, + children, + disabled, + projectId, + environmentId, + tooltipProps, + ...rest + }, + ref + ) => { + const { hasAccess } = useContext(AccessContext); + const id = useId(); let access; - if (Array.isArray(permission)) { - access = permission.some(permission => { - if (projectId && environmentId) { - return hasAccess(permission, projectId, environmentId); - } else if (projectId) { - return hasAccess(permission, projectId); - } else { - return hasAccess(permission); - } - }); - } else { - if (projectId && environmentId) { - access = hasAccess(permission, projectId, environmentId); - } else if (projectId) { - access = hasAccess(permission, projectId); - } else { - access = hasAccess(permission); - } - } - return access; - }; - - access = handleAccess(); - - return ( - - - - - - ); -}; + }); + } else { + if (projectId && environmentId) { + access = hasAccess(permission, projectId, environmentId); + } else if (projectId) { + access = hasAccess(permission, projectId); + } else { + access = hasAccess(permission); + } + } + + return access; + }; + + access = handleAccess(); + + return ( + + + + + + ); + } +); export default PermissionButton;