From b6830b805bbe0fab43459546fbb65599f3ee8d4b Mon Sep 17 00:00:00 2001
From: Mateusz Kwasniewski <kwasniewski.mateusz@gmail.com>
Date: Wed, 16 Aug 2023 13:55:18 +0200
Subject: [PATCH] feat: review buttons makeover (#4513)

---
 .../ChangeRequestOverview.tsx                 |  9 +++++--
 .../ReviewButton/ReviewButton.tsx             | 26 ++++++++++++++++---
 2 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestOverview.tsx b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestOverview.tsx
index 5f584ac168..dd739cda06 100644
--- a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestOverview.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestOverview.tsx
@@ -189,6 +189,9 @@ export const ChangeRequestOverview: FC = () => {
     const hasApprovedAlready = changeRequest.approvals.some(
         approval => approval.createdBy.id === user?.id
     );
+
+    const countOfChanges = changesCount(changeRequest);
+
     return (
         <>
             <ChangeRequestHeader changeRequest={changeRequest} />
@@ -199,7 +202,7 @@ export const ChangeRequestOverview: FC = () => {
                 </StyledAsideBox>
                 <StyledPaper elevation={0}>
                     <StyledInnerContainer>
-                        Requested Changes ({changesCount(changeRequest)})
+                        Requested Changes ({countOfChanges})
                         <ChangeRequest
                             changeRequest={changeRequest}
                             onRefetch={refetchChangeRequest}
@@ -256,7 +259,9 @@ export const ChangeRequestOverview: FC = () => {
                                         }
                                         onApprove={onApprove}
                                         disabled={!allowChangeRequestActions}
-                                    />
+                                    >
+                                        Review changes ({countOfChanges})
+                                    </ReviewButton>
                                 }
                             />
                             <ConditionallyRender
diff --git a/frontend/src/component/changeRequest/ChangeRequestOverview/ReviewButton/ReviewButton.tsx b/frontend/src/component/changeRequest/ChangeRequestOverview/ReviewButton/ReviewButton.tsx
index 12689d9ae0..9f00e48c98 100644
--- a/frontend/src/component/changeRequest/ChangeRequestOverview/ReviewButton/ReviewButton.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequestOverview/ReviewButton/ReviewButton.tsx
@@ -5,6 +5,8 @@ import { useChangeRequest } from 'hooks/api/getters/useChangeRequest/useChangeRe
 import {
     ClickAwayListener,
     Grow,
+    ListItemIcon,
+    ListItemText,
     MenuItem,
     MenuList,
     Paper,
@@ -18,12 +20,14 @@ import { useAuthUser } from 'hooks/api/getters/useAuth/useAuthUser';
 import AccessContext from 'contexts/AccessContext';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 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<{
     disabled: boolean;
     onReject: () => void;
     onApprove: () => void;
-}> = ({ disabled, onReject, onApprove }) => {
+}> = ({ disabled, onReject, onApprove, children }) => {
     const { uiConfig } = useUiConfig();
     const { isAdmin } = useContext(AccessContext);
     const projectId = useRequiredPathParam('projectId');
@@ -48,6 +52,9 @@ export const ReviewButton: FC<{
 
         setOpen(false);
     };
+    const popperWidth = anchorRef.current
+        ? anchorRef.current.offsetWidth
+        : null;
 
     return (
         <React.Fragment>
@@ -67,11 +74,12 @@ export const ReviewButton: FC<{
                 projectId={projectId}
                 environmentId={data?.environment}
             >
-                Review changes
+                {children}
             </PermissionButton>
             <Popper
                 sx={{
                     zIndex: 1,
+                    width: popperWidth,
                 }}
                 open={open}
                 anchorEl={anchorRef.current}
@@ -96,7 +104,12 @@ export const ReviewButton: FC<{
                                     autoFocusItem
                                 >
                                     <MenuItem onClick={onApprove}>
-                                        Approve changes
+                                        <ListItemIcon>
+                                            <CheckBox fontSize="small" />
+                                        </ListItemIcon>
+                                        <ListItemText>
+                                            Approve changes
+                                        </ListItemText>
                                     </MenuItem>
                                     <ConditionallyRender
                                         condition={Boolean(
@@ -104,7 +117,12 @@ export const ReviewButton: FC<{
                                         )}
                                         show={
                                             <MenuItem onClick={onReject}>
-                                                Reject changes
+                                                <ListItemIcon>
+                                                    <Clear fontSize="small" />
+                                                </ListItemIcon>
+                                                <ListItemText>
+                                                    Reject changes
+                                                </ListItemText>
                                             </MenuItem>
                                         }
                                     />