Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-02-04 00:18:01 +01:00
Code Issues Projects Releases Wiki Activity

feat: review buttons makeover (#4513)

Browse Source
This commit is contained in:
Mateusz Kwasniewski 2023-08-16 13:55:18 +02:00 committed by GitHub
parent 40325a0eb4
commit b6830b805b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 29 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestOverview.tsx
View File

@ -189,6 +189,9 @@ export const ChangeRequestOverview: FC = () => {
const hasApprovedAlready = changeRequest.approvals.some( const hasApprovedAlready = changeRequest.approvals.some(
approval => approval.createdBy.id === user?.id approval => approval.createdBy.id === user?.id
); );
const countOfChanges = changesCount(changeRequest);
return ( return (
<> <>
<ChangeRequestHeader changeRequest={changeRequest} /> <ChangeRequestHeader changeRequest={changeRequest} />
@ -199,7 +202,7 @@ export const ChangeRequestOverview: FC = () => {
</StyledAsideBox> </StyledAsideBox>
<StyledPaper elevation={0}> <StyledPaper elevation={0}>
<StyledInnerContainer> <StyledInnerContainer>
Requested Changes ({changesCount(changeRequest)}) Requested Changes ({countOfChanges})
<ChangeRequest <ChangeRequest
changeRequest={changeRequest} changeRequest={changeRequest}
onRefetch={refetchChangeRequest} onRefetch={refetchChangeRequest}
@ -256,7 +259,9 @@ export const ChangeRequestOverview: FC = () => {
} }
onApprove={onApprove} onApprove={onApprove}
disabled={!allowChangeRequestActions} disabled={!allowChangeRequestActions}
/> >
Review changes ({countOfChanges})
</ReviewButton>
} }
/> />
<ConditionallyRender <ConditionallyRender

22
frontend/src/component/changeRequest/ChangeRequestOverview/ReviewButton/ReviewButton.tsx
View File

@ -5,6 +5,8 @@ import { useChangeRequest } from 'hooks/api/getters/useChangeRequest/useChangeRe
import { import {
ClickAwayListener, ClickAwayListener,
Grow, Grow,
ListItemIcon,
ListItemText,
MenuItem, MenuItem,
MenuList, MenuList,
Paper, Paper,
@ -18,12 +20,14 @@ import { useAuthUser } from 'hooks/api/getters/useAuth/useAuthUser';
import AccessContext from 'contexts/AccessContext'; import AccessContext from 'contexts/AccessContext';
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import CheckBox from '@mui/icons-material/Check';
import Clear from '@mui/icons-material/Clear';
export const ReviewButton: FC<{ export const ReviewButton: FC<{
disabled: boolean; disabled: boolean;
onReject: () => void; onReject: () => void;
onApprove: () => void; onApprove: () => void;
}> = ({ disabled, onReject, onApprove }) => { }> = ({ disabled, onReject, onApprove, children }) => {
const { uiConfig } = useUiConfig(); const { uiConfig } = useUiConfig();
const { isAdmin } = useContext(AccessContext); const { isAdmin } = useContext(AccessContext);
const projectId = useRequiredPathParam('projectId'); const projectId = useRequiredPathParam('projectId');
@ -48,6 +52,9 @@ export const ReviewButton: FC<{
setOpen(false); setOpen(false);
}; };
const popperWidth = anchorRef.current
? anchorRef.current.offsetWidth
: null;
return ( return (
<React.Fragment> <React.Fragment>
@ -67,11 +74,12 @@ export const ReviewButton: FC<{
projectId={projectId} projectId={projectId}
environmentId={data?.environment} environmentId={data?.environment}
> >
Review changes {children}
</PermissionButton> </PermissionButton>
<Popper <Popper
sx={{ sx={{
zIndex: 1, zIndex: 1,
width: popperWidth,
}} }}
open={open} open={open}
anchorEl={anchorRef.current} anchorEl={anchorRef.current}
@ -96,7 +104,12 @@ export const ReviewButton: FC<{
autoFocusItem autoFocusItem
> >
<MenuItem onClick={onApprove}> <MenuItem onClick={onApprove}>
<ListItemIcon>
<CheckBox fontSize="small" />
</ListItemIcon>
<ListItemText>
Approve changes Approve changes
</ListItemText>
</MenuItem> </MenuItem>
<ConditionallyRender <ConditionallyRender
condition={Boolean( condition={Boolean(
@ -104,7 +117,12 @@ export const ReviewButton: FC<{
)} )}
show={ show={
<MenuItem onClick={onReject}> <MenuItem onClick={onReject}>
<ListItemIcon>
<Clear fontSize="small" />
</ListItemIcon>
<ListItemText>
Reject changes Reject changes
</ListItemText>
</MenuItem> </MenuItem>
} }
/> />